firefox下rowspan+border+border-collapse的bug

ttx9n · 发表于 2010-2-8 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。看解决前的代码：

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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
解决后的代码：

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>

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

fwn2rd · 发表于 2022-12-27 07:40:21

刷屏刷屏刷屏

6hruhg · 发表于 2023-9-22 12:34:13

搞个免费的用用

ppwxcg · 发表于 2023-9-26 14:28:54

数据库了多久撒快乐的健身卡啦

qwe520 · 发表于 2023-10-8 16:59:27

66666666666

fzyzy · 发表于 2024-3-4 08:00:20

还有人在不。。。。。。。。。。啊

雪龙Ui79 · 发表于 2024-3-5 22:31:53

好东西一定要看看！

qzdhcgs · 发表于 2024-5-3 10:47:38

而快乐你们快乐马年快乐

qwe520 · 发表于 2024-6-22 04:19:29

挺不错的东西

adm1n · 发表于 2024-6-24 01:49:40

先把创新班才能下班才能下班

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] firefox下rowspan+border+border-collapse的bug

相关帖子