奇怪的边框渲染

我有一个包含一个表的页面。奇怪的边框渲染

<tr>的有border-bottom: 1px dotted black;，但正如你从下面的图片中可以看到的，它们渲染的很奇怪。有谁知道这可能是为什么？

enter image description here

相关CSS

.basket-item{ 
    border-bottom: 1px dotted black; 
    border-top: 1px dotted black; 
    padding: 10px 0; 
} 

.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row 
    padding: 25px; 
    vertical-align: top; 
    text-align: left; 
}

HTML结构是一个标准表，<tr>的有一类.basket-item

预先感谢任何帮助

来源

2013-04-18 Bill

我已经看到这个表格的渲染问题。没有表的布局可能在这里工作。一般来说，避免使用表格进行布局。表格用于数据。 –

此表用于显示表格数据。不过谢谢。 – Bill

如果你可以提供一个[fiddle]（http://jsfiddle.net），那将会很好，因为在你的页面上调试并不容易......无论如何，这看起来像是Chrome（或者WebKit）问题。我没有注意到Firefox中的效果。对于Chrome，您可以将'h4'更改为'margin-bottom：1.5em'。 – Passerby

从注释扩展：

这个问题似乎只/主要影响浏览器（或WebKit的），以及一些不成功的试用后，我终于想出了这一点：

添加

h4 { 
    margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */ 
}

这样做的原因是，您所指定

font-size: 14px;

和Chrome有一个内部的CSS，看起来像：

h4 { 
    -webkit-margin-before: 1.33em; /* works like margin-top */ 
    -webkit-margin-after: 1.33em; /* works like margin-bottom */ 
}

，使一个浮点数像素（14 * 1.33 = 18.62），以及（可能低于其它元素，尤其是float: left元素），Chrome浏览器似乎有需要以“计算”“占位符”的剩余空间高度，最后以“非常接近200px”的浮点数结束。

观察：

在我的Chrome中，<td>应该是250像素高度（包括padding）。这<td>有padding: 25px，所以“内部高度”应该是200px，但默认风格，在开发工具，浏览器显示，<td>实际上199.609375px高度。将h4的margin-bottom覆盖为一个整数，将内部高度“归一化”回200px。

来源

2013-04-22 03:14:34 Passerby

+1！感谢您在答案中的提示，它解决了我遇到的一个不同的问题，即Chrome正在剪裁我正在显示的“canvas”（可动态调整大小）的底部边界。添加一个'边缘底部'做了诀窍。 – miqid

这是显然是桌面显示;如果您将td或tr更改为另一个显示器（如inline-block），它会消失，但布局已损坏。它也似乎取决于视口的缩放级别：如果向上扩展，可以使奇怪的边框消失（顶部和底部边框）：tr和td的高度有时会从250px切换到251px。

有这么几个信息，我不能推导出另一个参数改变。

如果没有任何实际解决方案，请考虑更改您的显示类型（tr或td），并根据您的要求调整布局。

来源

2013-04-18 11:27:53 Bigood

奇怪的边框渲染

回答

相关问题