网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
firefox下rowspan+border+border-collapse的bug
(编辑：jimmy 日期: 2025/3/16 浏览：
2
)
后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse;
表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Rank's HTML document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><meta http-equiv="ImageToolbar" content="no"><meta http-equiv="Creator.name" content="rank"><style type="text/css" title="default" media="screen"></style></head><body><style>* {font-size:15px;text-decoration:none;}td {border-top:1px solid #000}</style><th width="49%">第一列</th><th width="50%">第二列</th> test 第一条中间没有横线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 最后一条中间没有横线 test</body></html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
经过验证，两种解决方法。
去除border-collapse
加上一个border-left或者border-right
无独有偶，后来搜索了一下，也有前人踩到了这个坑里，它的解决方法也是：border-left:1px solid #999 important;border-left:none的方法来解决。
(see detail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
好在可以通过border的错觉及颜色来解决这个问题。为了偷懒，我直接用上了对方的e.g。看解决前的代码：
<html><head><style type="text/css">table {border-collapse:collapse;}th, td {border: 1px black solid;}th {background-color: #A9AE7B;}td.right_user_img {border-left:none;background-color: #999999;text-align: center;padding: 15px;}td.left_user_img {border-right: none;background-color: #CCCCCC;text-align: center;padding: 15px;}td.left_image_join {background-color: #CCCCCC;border-left: none;}td.right_image_join {background-color: #999999;border-right: none;}img {border: none;}</style></head><body><thead><th></th><th>Image</th><th>Insert Heading Here</th><th>Image</th></thead><th>1</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>2</th>Data<th>3</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>4</th>Data<th>5</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>6</th>Data<th>7</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>8</th>Data<th>9</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>10</th>Data</body></html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
解决后的代码：
<html><head><style type="text/css">table {border-collapse:collapse;}th, td {border: 1px black solid;}th {background-color: #A9AE7B;}td.right_user_img {border-left:1px solid #999999 !important; /*this solves border-collapse/rowspan bug in firefox 3 */border-left:none;background-color: #999999;text-align: center;padding: 15px;}td.left_user_img {border-right: none;background-color: #CCCCCC;text-align: center;padding: 15px;}td.left_image_join {background-color: #CCCCCC;border-left: none;}td.right_image_join {background-color: #999999;border-right: none;}img {border: none;}</style></head><body><thead><th></th><th>Image</th><th>Insert Heading Here</th><th>Image</th></thead><th>1</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>2</th>Data<th>3</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>4</th>Data<th>5</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>6</th>Data<th>7</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>8</th>Data<th>9</th><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/arnie.png');"><img src="/UploadFiles/2021-04-02/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>Data<a href="javascript:;" onclick="showimg('http://msn.mess.be/data/thumbnails/16/arnie.png');"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="firefox下rowspan+border+border-collapse的bug" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><th>10</th>Data</body></html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
PS.好象firefox 一直以来就有这个bug。问多久前有的？至少flock就有了
上一篇：
了解CSS的查找匹配原理，让CSS更简洁、高效
下一篇：
CSS的inherit与auto使用分析
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。
首页
音乐
电影
资源