firefox下rowspan+border+border-collapse的bug
2010-02-08 07:33
1071 查看
后查具体情况概述为: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 |
经过验证,两种解决方法。
去除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 |
解决后的代码:
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 |
PS.好象firefox 一直以来就有这个bug。问多久前有的?至少flock就有了
相关文章推荐
- firefox下rowspan+border+border-collapse的bug
- border-collapse在Firefox中的细节问题
- Firefox奇怪的文字溢出bug,百思不得其解
- Table的border-collapse属性
- jquery ui 自動完成對中文字搜尋Bug(firefox)
- Firefox中autocomplete="off" 设置不起作用Bug的解决方法
- 使用border-collapse:collapse;属性新建一个细线表格
- css的border-collapse
- jquery的autocomplete在firefox的bug
- firefox不显示border通过清除float便可解决
- 用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下).
- FireFox下文本框/域百分比自适应数值padding显示bug解决方案
- CSS border-collapse 属性
- 修正jquery的autocomplete在firefox下不支持中文输入法的bug
- firefox,IE8中margin-top的bug及解决办法
- 修复jQuery UI Autocomplete在firefox不支持中文的BUG
- Firefox 的 HTML 注释 Bug
- IE6中有一个BUG叫border边框断线现象(border边框部分消失)
- ASP.NET中Image控件border-width的一个诡异的BUG
- li中浮动元素span等在IE和Firefox中的高度Bug