firefox下rowspan+border+border-collapse的bug


后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse;
表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。
先看示例吧:
Rank's HTML document 第一列 第二列 test 第一条中间没有横线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 可爱的firefox让我们看到了两条线 test test 最后一条中间没有横线 test
[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。看解决前的代码:
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需刷新才能执行]
解决后的代码:
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需刷新才能执行]
PS.好象firefox 一直以来就有这个bug。问多久前有的?至少flock就有了

了解CSS的查找匹配原理,让CSS更简洁、高效
看1个简单的CSS:DIV#divBoxpspan.red{color:red;},按习惯我们对这个CSS的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再

Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大

Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章。ZenCoding快速编写HTML/CSS代码的实现E元素名称(div,p);E#id使用id的元素(div#content,p#intro,span#error);E.class使用类的元素(div.header