firefox下rowspan+border+border-collapse的bug

更新时间：2010年02月08日 07:33:55 作者：

好久没有发相关浏览器的坑了。今天同事cy发现，在firefox里rowspan不生效...

后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse;
表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Rank's HTML document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><meta http-equiv="ImageToolbar" content="no"><meta http-equiv="Creator.name" content="rank"><style type="text/css" title="default" media="screen"></style></head><body><style>* {font-size:15px;text-decoration:none;}td {border-top:1px solid #000}</style><table width="50%" border="0" style="border:1px solid #000;border-collapse:collapse;width:100%;"><tr><th width="49%">第一列</th><th width="50%">第二列</th></tr><tr class=""><td> test </td><td rowspan="2"><a href="#">第一条中间没有横线</a> </td></tr><tr class=""><td>test</td></tr><tr class="zebra"><td> test </td><td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td></tr><tr class="zebra"><td>test</td></tr><tr class=""><td> test </td><td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td></tr><tr class=""><td>test</td></tr><tr class="zebra"><td> test </td><td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td></tr><tr class="zebra"><td>test</td></tr><tr class=""><td> test </td><td rowspan="2"><a href="#">最后一条中间没有横线</a> </td></tr><tr class=""><td>test</td></tr></table></body></html>

[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。看解决前的代码：

<html><head><style type="text/css">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;}</style></head><body><table cellspacing="0px" cellpadding="5px"><thead><tr><th></th><th>Image</th><th>Insert Heading Here</th><th>Image</th></tr></thead><tbody><tr><th>1</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>2</th><td class="right_image_join">Data</td></tr><tr><th>3</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>4</th><td class="right_image_join">Data</td></tr><tr><th>5</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>6</th><td class="right_image_join">Data</td></tr><tr><th>7</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>8</th><td class="right_image_join">Data</td></tr><tr><th>9</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>10</th><td class="right_image_join">Data</td></tr></tbody></table></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

解决后的代码：

<html><head><style type="text/css">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;}</style></head><body><table cellspacing="0px" cellpadding="5px"><thead><tr><th></th><th>Image</th><th>Insert Heading Here</th><th>Image</th></tr></thead><tbody><tr><th>1</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>2</th><td class="right_image_join">Data</td></tr><tr><th>3</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>4</th><td class="right_image_join">Data</td></tr><tr><th>5</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>6</th><td class="right_image_join">Data</td></tr><tr><th>7</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>8</th><td class="right_image_join">Data</td></tr><tr><th>9</th><td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td></tr><tr><th>10</th><td class="right_image_join">Data</td></tr></tbody></table></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width
2008-09-09
css下margin、padding、border、background和font缩写示例
CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。
2008-06-06
用css实现隐藏文本框
用css实现隐藏文本框...
2007-08-08
20个优秀CSS网站（3月精选）
20个优秀CSS网站（3月精选）...
2007-03-03
告别AJAX实现无刷新提交表单
通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。
2014-05-05
css 通配符用法总结
css通配符的意义说明，学习css的朋友，会经常用的着
2008-10-10
CSS文字截取功能实现代码
用css来实现自动截取文字，不需要后台程序和JS的使用。
2008-06-06
CSS注释、命名、继承性、样式排序等CSS技巧的小结
CSS注释、命名、继承性、样式排序等CSS技巧的小结...
2007-09-09
多浏览器下IE6 IE7 firefox li 间距问题
多浏览器下IE6 IE7 firefox li 间距问题...
2007-11-11
CSS定位中Positoin、absolute、Relative的一些研究
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Positoin属性等。
2008-10-10

firefox下rowspan+border+border-collapse的bug

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具