首页 > 开发 > CSS > 正文

firefox下rowspan+border+border-collapse的bug

2024-07-11 09:01:26
字体:
来源:转载
供稿:网友
好久没有发相关浏览器的坑了。今天同事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" /> 去除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>


解决后的代码:
/
<html>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表