边框渲染奇怪

Question

我有一个包含表格的页面。

<tr>有一个border-bottom: 1px dotted black;，但正如您从下图所示，它们渲染得非常奇怪。有谁知道为什么会这样？

相关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

提前感谢您提供任何帮助

Answer 1

延伸评论：

这个问题似乎只是/主要影响Chrome（或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>应为250px高度（包括padding）。 <td>具有padding: 25px，因此“内部高度”应为200px，但在默认样式下，在开发者工具中，Chrome会显示<td>实际为{{1}高度。覆盖199.609375px margin-bottom整数“归一化”内部高度回200px。

Answer 2

显然是桌面展示;如果您将td或tr更改为另一个显示（例如inline-block），它会消失，但您的布局会被破坏。

它似乎还取决于视口的缩放级别：如果向上缩放，可以使奇怪的边框消失（顶部和底部边框）：tr和td的高度有时会从250px切换到251px。

由于信息太少，我无法推断出另一个要改变的参数。

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