以下"左侧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边框时,我以:
我认为这个问题很常见,并且在SO本身就已经找到了,但是找不到如何解决这个问题.
问题:
当您调整窗口大小时,您会注意到两个图像的高度有时会相差1px(当浏览器调整尺寸时,这是预期的).
如何"修复"此UI问题？我知道我可以通过使用一个flexbox.但我想有更好的解决方案.你们可以跳进去吗？
table{
width:100%;
border-collapse: collapse;
}
img{
display: block;
width: 100%;
}<table>
<tr>
<td><img src="http://placehold.it/100x100"/></td>
<td><img src="http://placehold.it/100x100"/></td>
</tr>
</table>我甚至在这里使用display: table:
.wrapper{
width:100%;
display: table;
}
.wrapper div{
display: table-cell;
}
img{
display: block;
width: 100%;
}<div class="wrapper">
<div><img src="http://placehold.it/100x100"/></div>
<div><img src="http://placehold.it/100x100"/></div>
</div>编辑:Firefox浏览器中没有问题,但Chrome中存在问题.
请注意,当我使用时,问题不存在flexbox:
body{
margin: 0;
}
.wrapper{
width:100%;
display: flex;
}
.wrapper div{
flex: 1;
}
img{
display: block;
width: 100%;
}<div class="wrapper"> …