提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

firefox下rowspan+border+border-collapse的bug

BUG firefox border Collapse
2023-06-13 09:14:16 时间
后查具体情况概述为：firefox+tablerowspan+border+border-collapse:collapse;
表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧：
Rank"sHTMLdocument 第一列 第二列 test 第一条中间没有横线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 最后一条中间没有横线 test

经过验证，两种解决方法。
去除border-collapse
加上一个border-left或者border-right
无独有偶，后来搜索了一下，也有前人踩到了这个坑里，它的解决方法也是：border-left:1pxsolid#999important;border-left:none的方法来解决。
(seedetail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
好在可以通过border的错觉及颜色来解决这个问题。为了偷懒，我直接用上了对方的e.g。看解决前的代码：
table{ border-collapse:collapse; } th,td{ border:1pxblacksolid; } 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; } Image InsertHeadingHere Image 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data

解决后的代码：
table{ border-collapse:collapse; } th,td{ border:1pxblacksolid; } th{ background-color:#A9AE7B; } td.right_user_img{ border-left:1pxsolid#999999!important;/*thissolvesborder-collapse/rowspanbuginfirefox3*/ 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; } Image InsertHeadingHere Image 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data

PS.好象firefox一直以来就有这个bug。问多久前有的？至少flock就有了

相关文章