关键词1
关键词101
关键词201
关键词301
关键词401
关键词501
关键词601
关键词701
关键词801
关键词901
关键词1001
关键词1101
关键词1201
关键词1301
关键词1401
关键词1501
关键词1601
关键词1701
关键词1801
关键词1901
问答1
问答101
问答201
问答301
问答401
问答501
问答601
问答701
问答801
问答901
问答1001
问答1101
问答1201
问答1301
问答1401
问答1501
问答1601
问答1701
问答1801
问答1901
懂视1
懂视101
懂视201
懂视301
懂视401
懂视501
懂视601
懂视701
懂视801
懂视901
懂视1001
懂视1101
懂视1201
懂视1301
懂视1401
懂视1501
懂视1601
懂视1701
懂视1801
懂视1901
文库1
文库101
文库201
文库301
文库401
文库501
文库601
文库701
文库801
文库901
文库1001
文库1101
文库1201
文库1301
文库1401
文库1501
文库1601
文库1701
文库1801
文库1901
分类文章1
分类文章101
分类文章201
分类文章301
分类文章401
分类文章501
分类文章601
分类文章701
分类文章801
分类文章901
分类文章1001
分类文章1101
分类文章1201
分类文章1301
分类文章1401
分类文章1501
分类文章1601
分类文章1701
分类文章1801
分类文章1901
步旅网
搜索
首页
旅游资讯
线路攻略
景点大全
国内游
境外游
美食特产
您的当前位置：
首页
正文
firefox下rowspan+border+border-collapse的bug_经验交流
2020-11-27
来源：步旅网
后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse;
表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧：
<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">第一条中间没有横线 </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2">最后一条中间没有横线 </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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/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就有了
Top