firefox下rowspan+border+border-collapse的bug

后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse;
表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的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需刷新才能执行]

经过验证,两种解决方法。
去除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需刷新才能执行]

解决后的代码:

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需刷新才能执行]

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

(0)

相关推荐

  • firefox下rowspan+border+border-collapse的bug

    后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse; 表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同. 先看示例吧: Rank's HTML document * {font-size:15px;text-decoration:none;} td {border-top:1px solid #000} 第一列 第二列 test 第一条中间没有横线 test test 可爱的firefox让

  • 使用jQuery解决IE与FireFox下createElement方法的差异

    当我们需要动态生成DOM对象的时候,会使用createElement的方法创建.但是在IE和Firefox下,createElement方法是有差异的. 在 IE 中,可以使用以下两种方式来创建一个元素: 1.document.createElement('table') 2.document.createElement('<table border="0">') 而在 Firefox 只支持: document.createElement('table') 同时,如果添加

  • IE和Firefox下javascript的兼容写法小结

    1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username").value); </

  • Firefox下样式设置宽度奇怪现象

    页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 复制代码 代码如下: <body> <div id="container"> <table id="grid">....列表数据....</table> </div> </body> 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置了样式 #gr

  • css pointer控制在firefox下显示手型的代码

    在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行 改用 style="cursor:pointer;" 则在两个浏览器下都能正常显示 但只适用于IE6.0及以上版本以及FIREFOX,在IE5.0下不能显示成手

  • firefox下jquery ajax返回object XMLDocument处理方法

    在firefox下使用jquery ajax处理struts2 返回json类型的时候,ajax执行成功返回结果为 [object XMLDocument]. 处理办法:在getWriter.print():前面加上一行代码 复制代码 代码如下: ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");

  • firefox下javascript实现高亮关键词的方法

    复制代码 代码如下: IE下有:   var range = document.createRange();   FireFox下有:   var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注:我这里不是用正则替换,因为正则替换有它的不足之处! 不知道先前有没有高人研究过这种方法. Untitled

  • E3 tree 1.6在Firefox下显示问题的修复方法

    tree 在Firefox下只显示一句话: 用firebug查看页面元素观察发现 两个script导入被一个<script>分隔开了,显然是document.write的问题.由于Firefox对js规范的检查比较严格,肯定一些字符输出的的时候没有转义. 查看e3 tree的源代码: /E3Tree/src/net/jcreate/e3/tree/ext/ExtTreeBuilder.java /E3Tree/src/net/jcreate/e3/tree/ext/OutlookExtTree

  • IE与Firefox下javascript getyear年份的兼容性写法

    IE与Firefox下javascript getyear年份不同浏览器 JavaScript 的getyear年份函数兼容性问题 先举个例子 用 Firefox 上一些网站会看到这样的提示 现在时间是 106年8月8日 而用 ie 浏览器的话就显示正常的 2006年8月8日 原因就是 javascript 的兼容性问题 var today = new date(); var year = today.getYear(); 在 Firefox 里面 getYear 返回的是 "当前年份-1900

  • IE和Firefox下event事件杂谈

    因为javascript的事件模型有三种,它们分别是NN4.IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作.首先看如下代码: 复制代码 代码如下: function doEventThing(eventTag){ var event = eventTag||window.event; var currentKey = event.charCode||event.keyCode;

随机推荐