1

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

的<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

提前感谢您的帮助

4

2 回答 2

3

从评论扩展：

这个问题似乎只/主要影响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那是“非常接近200px”。

观察：

在我的 Chrome 中，<td>应该是 250px 高度（包括padding）。那<td>有padding: 25px，所以“内部高度”应该是200px，但使用默认样式，在开发人员工具中，Chrome 显示<td>实际199.609375px高度。margin-bottom将of覆盖为h4整数，将内部高度“标准化”回 200px。

于 2013-04-22T03:14:34.887 回答
1

显然是表格显示；如果您将您的td或您的显示器更改tr为另一个显示器（如inline-block），它会消失，但您的布局已损坏。

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

由于信息如此之少，我无法推断出另一个要更改的参数。

在没有任何实际解决方案的情况下，请考虑更改显示类型（tr或td），并调整布局以适应您的要求。

于 2013-04-18T11:27:53.833 回答