当前位置：首页 > 资讯 > 技术文档

firefox下rowspan+border+border-collapse的bug

时间：2021-08-11 21:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：firefox下rowspan+border+border-collapse的bug

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

Rank's HTML document
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta content="no-cache" http-equiv="Pragma">
<meta content="no-cache" http-equiv="Cache-Control">
<meta content="0" http-equiv="Expires">
<meta content="no" http-equiv="ImageToolbar">
<meta content="rank" http-equiv="Creator.name">

<table border="0" style="border:1px solid #000;border-collapse:collapse;width:100%;" width="50%">
<tr>
<th width="49%">第一列</th>
<th width="50%">第二列</th>
</tr>
<tr class="">
<td> test </td>
<td rowspan="2">[url=http://www.1sucai.cn/article/22041.htm#]第一条中间没有横线[/url] </td>
</tr>
<tr class="">
<td>test</td>
</tr>
<tr class="zebra">
<td> test </td>
<td rowspan="2">[url=http://www.1sucai.cn/article/22041.htm#]可爱的firefox让我们看到了两条线[/url] </td>
</tr>
<tr class="zebra">
<td>test</td>
</tr>
<tr class="">
<td> test </td>
<td rowspan="2">[url=http://www.1sucai.cn/article/22041.htm#]可爱的firefox让我们看到了两条线[/url] </td>
</tr>
<tr class="">
<td>test</td>
</tr>
<tr class="zebra">
<td> test </td>
<td rowspan="2">[url=http://www.1sucai.cn/article/22041.htm#]可爱的firefox让我们看到了两条线[/url] </td>
</tr>
<tr class="zebra">
<td>test</td>
</tr>
<tr class="">
<td> test </td>
<td rowspan="2">[url=http://www.1sucai.cn/article/22041.htm#]最后一条中间没有横线[/url] </td>
</tr>
<tr class="">
<td>test</td>
</tr>
</table>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

经过验证，两种解决方法。去除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 cellpadding="5px" cellspacing="0px">
<thead>
<tr>
<th></th>
<th>Image</th>
<th>Insert Heading Here</th>
<th>Image</th>
</tr>
</thead>

<tbody>

<tr>
<th>1</th>
<td class="left_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
<td class="left_image_join">Data</td>
<td class="right_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
</tr>

<tr>
<th>3</th>
<td class="left_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
<td class="left_image_join">Data</td>
<td class="right_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
</tr>

<tr>
<th>5</th>
<td class="left_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
<td class="left_image_join">Data</td>
<td class="right_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
</tr>

<tr>
<th>7</th>
<td class="left_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
<td class="left_image_join">Data</td>
<td class="right_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
</tr>

<tr>
<th>9</th>
<td class="left_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
<td class="left_image_join">Data</td>
<td class="right_user_img" rowspan="2">[img]http://msn.mess.be/data/thumbnails/16/arnie.png[/img]
</td>
</tr>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

解决后的代码：

<table cellpadding="5px" cellspacing="0px">
<thead>
<tr>
<th></th>
<th>Image</th>
<th>Insert Heading Here</th>
<th>Image</th>
</tr>
</thead>

<tbody>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

全部评论(0)

上一篇：div+css详解定位与定位应用
下一篇：Internet Explorer 8 beta 中文版与IE7共存的解决方法

资讯排行榜
更多>>