Firefox 1像素错误与边界崩溃，解决方法？ [英] Firefox 1 pixel bug with border-collapse, workaround?
问题描述
下列「左侧1个像素」错误有什么解决方法吗？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =en>
< body>
< div style =padding：50px>
< div style =border：1px solid red>表标题信息< / 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>世界< / td>
< / tr>
< / tbody>
< / table>
< div style =border：1px solid red>表尾页信息< / div>
< / div>
< / body>
< / html>
它看起来像这样：
img src =http://i42.tinypic.com/245x9ud.pngalt =Firefox CSS bug>
有没有任何纯CSS解决方案？
编辑
我不清楚我的表格这里它又是：
使用border-collapse：
如果建议使用cellspacing =0
所以现在我的表格内的边界是加倍，但我想在我的表的1px边框。
当我删除1px边框表I结尾为：
边框在我的表格内仍然加倍。
我可以只为每个TD，TH和左边设置右边框和底边框
删除边框-collapse并使用cellpacing = 0。
< table style =border：15px solid green; width：100％cellspacing =0>
这是因为当您设置border-collapse：collapse时，Firefox 2.0将边框放在外边英文其他浏览器把它放在里面。
在您的代码中将边框宽度设置为10px，以了解实际发生的情况。
在OP编辑后编辑
您可以使用旧表格border设置表上的背景颜色。将td和th颜色设置为白色。 User cellacing = 1;
table {background-color：green; width：100％;}
td，th {background-color：white;}
< div style =padding：50px>
< div style =border：1px solid red>表标题信息< / div>
< table cellspacing =1>
< tbody>
< tr>
< th> Col1< / th>
< th> Col2< / th>
< / tr>
< tr>
< td> Hello< / td>
< td>世界< / td>
< / tr>
< / tbody>
< / table>
< div style =border：1px solid red>表尾页信息< / div>
< / div>
Is there any workaround for the following "1 pixel to the left" bug?
<!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>
It looks like this:
Is there any pure CSS solution to this?
Edit
I was bit unclear about my table so here it is again:
With border-collapse:
With cellspacing="0" and without border-collapse as suggested:
So now the borders inside my table are doubled, but I want 1px border across my table.
When I remove 1px border from table I end with:
Borders are still doubled inside my table.
I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
Set your border widths to 10px in your code to see what is really happening.
edit after OP edit
You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User 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>
这篇关于Firefox 1像素错误与边界崩溃，解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
