当前位置: 编程技术>WEB前端
firefox下rowspan+border+border-collapse的bug
来源: 互联网 发布时间:2014-10-07
本文导语: 后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse; 表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。 先看示例吧: Rank's HTML document * {font-size:15px;text-decoration:none;} td {bord...
后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse;
表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。
先看示例吧:
经过验证,两种解决方法。
去除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。看解决前的代码:
解决后的代码:
PS.好象firefox 一直以来就有这个bug。问多久前有的?至少flock就有了
表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。
先看示例吧:
Rank's HTML document
* {font-size:15px;text-decoration:none;}
td {border-top:1px solid #000}
第一列
第二列
test
第一条中间没有横线
test
test
可爱的firefox让我们看到了两条线
test
test
可爱的firefox让我们看到了两条线
test
test
可爱的firefox让我们看到了两条线
test
test
最后一条中间没有横线
test
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
[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。看解决前的代码:
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;
}
Image
Insert Heading Here
Image
1
Data
2
Data
3
Data
4
Data
5
Data
6
Data
7
Data
8
Data
9
Data
10
Data
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
解决后的代码:
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;
}
Image
Insert Heading Here
Image
1
Data
2
Data
3
Data
4
Data
5
Data
6
Data
7
Data
8
Data
9
Data
10
Data
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
PS.好象firefox 一直以来就有这个bug。问多久前有的?至少flock就有了
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。