Vex*_*tus 36 css firefox rendering border
以下"左侧1个像素"错误是否有任何解决方法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>
它看起来像这样:
Firefox CSS bug http://i42.tinypic.com/245x9ud.png
这有什么纯CSS解决方案吗？
我对我的桌子有点不清楚,所以这里又是:
边界崩溃:
Firefox CSS bug http://i42.tinypic.com/245x9ud.png
使用cellspacing ="0"并且没有建议的边框折叠:
Firefox CSS bug http://i44.tinypic.com/2rg0qxi.png
所以现在我桌子里的边框加倍了,但是我希望桌子上有1px的边框.
当我从表中删除1px边框时,我以:
Firefox CSS bug http://i40.tinypic.com/2vbokmq.png
在我的桌子里,边界仍然加倍.
我可以为TR中的每个第一个孩子设置每个TD,TH和左边界的右边界和底边,以达到我想要的效果,但我认为有一种更简单的方法吗？
小智 22
对于那些喜欢将演示文稿保留在标记之外或者无法访问标记的人来说,这里只是一个纯粹的CSS解决方案.我自己遇到了这个问题,并在FF3.5,IE6,IE7,IE8,Safari 4,Opera 10和Google Chrome中测试了这个解决方案.
table { border-spacing: 0; *border-collapse: collapse; }
这将表设置为在所有浏览器中使用边框间距(包括罪魁祸首,Firefox).然后它使用CSS星形黑客仅向IE呈现边框折叠规则,IE没有正确应用边框间距(如果你不喜欢黑客,你还可以为带有条件注释的IE包含一个单独的样式表).
如果您更喜欢使用单元格间距,请务必使用它.这只是作为使用CSS的替代方法提供的.
Emi*_*ily 18
删除border-collapse并使用cellspacing = 0代替.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
这是因为当您设置border-collapse:collapse时,Firefox 2.0会将边框置于tr的外部.其他浏览器把它放在里面.
在代码中将边框宽度设置为10px,以查看实际发生的情况.
OP编辑后编辑
你可以使用旧表"边框"技巧.在表格上设置背景颜色.将td和th颜色设置为白色.用户cellspacing = 1;
table {background-color: green;width:100%;}
td, th{background-color:white;}
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
最佳仅 CSS 解决方案：
添加
td {
background-clip: padding-box
}
更多信息：https : //developer.mozilla.org/en-US/docs/CSS/background-clip
感谢@medoingthings
此问题不再存在.在Firefox 47.0.1中,以下CSS不会出现一个像素问题:
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #000;
}
我们还可以获得干净的单像素边框,而不依赖于工作实现border-collapse,如下所示:
table {
border: solid 1px #000;
border-width: 0 1px 1px 0;
border-spacing: 0;
}
th, td {
border: solid 1px #000;
border-width: 1px 0 0 1px;
}
你看到它在做什么？诀窍是我们只在细胞上放置一个上边框和左边框:
+------+------
| cell | cell
+------+------
| cell | cell
这使得桌子没有右边和右边:我们将它们设置为 table
+------+------- | +-------+------+ | cell | cell | | cell | cell | +------+------- + | = +-------+------+ | cell | cell | | cell | cell | | | ---------+ +-------+------+
这border-spacing: 0是必不可少的,否则这些线路将无法连接.