display:table div 百分比宽度为 1px 错误

Question

外层 div 有百分比宽度，内层 div 有 display: tabel; width: 100%.

在调整大小时，对于某些页面宽度，内部 div 比外部 div 小 1 像素。这会在右侧添加一条 1px 的线。

https://jsfiddle.net/afelixj/utcswLp1/1/

是否有任何修复该错误的方法？

Answer 1

将您的 display:table 更改为 display:block。

Answer 2

您的问题是由容器的“60%”宽度引起的。

Chrome 截去小数点（300.5px 会变成 300px）。
因此，当内div设置为“100%”时，是在父div

的四舍五入宽度处计算的

所以，假设外部 div 是 300.5px（占总数的 60%）。
里面的div被计算为300px的100%；

Answer 3

这似乎是一个特定的 webkit 错误：https://bugs.webkit.org/show_bug.cgi?id=140371

当 display:table-* 元素包含在其 width 未使用绝对单位定义的父元素中时，其宽度并不总是正确计算。您可以在此处查看此问题的实际效果：查看红色元素的右侧

---

您可以通过两种不同的方式解决此问题

1. 您可以使用绝对单位或
定义父元素的宽度
2. 您也可以将 display: table 应用于容器元素。这并没有真正解决这个错误，但它应该不会再引人注意了（因为它也会影响父元素）。

Answer 4

我知道这已经很晚了，但这是我也必须处理的这个错误的修复程序。

如本帖所述，问题在于使用百分比作为宽度单位。浏览器将小数点四舍五入为整数。所以我们需要做的就是将 1 个像素添加到基于的百分比。我们可以用 calc:

width: calc(100% + 1px);

这适用于除 IE 11 及更早版本以外的所有主流浏览器。

Answer 5

.wrap{
background: #000; 
height: 400px;
width: 60%;
display:inline-table;}

只需像这样更改您的 css 代码

Answer 6

@media screen and (-webkit-min-device-pixel-ratio:0) {
    width: calc(100% + 0.5px);
}

备注：

• 添加 1px 并不能解决 WebKit 上的问题……它只会颠倒它
• 添加 0.5px 会在某些 non-WebKit 浏览器上引入问题……将其包装在媒体查询中可以解决此问题

Answer 7

使用 display: table 可能会带来不需要的副作用，即 table css 样式应用于 div。因此我为我的项目选择了display: contents。