firefox下rowspan+border+border-collapse的bug

发布时间：2010-02-08　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

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

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

[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> <thead> <th></th> <th>Image</th> <th>Insert Heading Here</th> <th>Image</th> </thead> <th>1</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>2</th> Data <th>3</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>4</th> Data <th>5</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>6</th> Data <th>7</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>8</th> Data <th>9</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>10</th> Data </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> <thead> <th></th> <th>Image</th> <th>Insert Heading Here</th> <th>Image</th> </thead> <th>1</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>2</th> Data <th>3</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>4</th> Data <th>5</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>6</th> Data <th>7</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>8</th> Data <th>9</th> <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> Data <img src="http://msn.mess.be/data/thumbnails/16/arnie.png"> <th>10</th> Data </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
PS.好象firefox 一直以来就有这个bug。问多久前有的？至少flock就有了

上一篇：了解CSS的查找匹配原理，让CSS更简洁、高效

下一篇：CSS的inherit与auto使用分析

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

firefox下rowspan+border+border-collapse的bug

相关推荐

文章分类

热门关键词

热门文章

最新更新