display：表格div，百分比宽度为1px bug

Question

外部div的宽度为百分比，内部的div为display: tabel; width: 100%。

在调整大小时，内部div显示1px小于外div的某些页面宽度。这会在右侧添加1px行。

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

该错误有什么问题吗？

Answer 1

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

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

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

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

Answer 2

cin

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

Answer 3

你的问题来自＆＃34; 60％＆＃34;容器的宽度。

Chrome会截断小数（300.5px将变为300px） 因此，当内部div设置为＆＃34; 100％＆＃34;时，它将以父div的圆角宽度计算

所以，让我们说外部div为300.5px（占总数的60％） 内部div被计算为300px的100％;

Answer 4

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

Answer 5

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

注意：

• 添加1px并不能解决WebKit上的问题...它只是将其反转
• 添加0.5px会在某些非WebKit浏览器上引入问题...将其包装在媒体查询中解决此问题

Answer 6

我知道这已经很晚了，但是这里也解决了我必须处理的这个错误。

如本主题所述，问题在于使用百分比作为宽度的单位。浏览器将小数字向下舍入为完整数字。所以我们需要做的就是在基于百分比的基础上增加1个像素。我们可以用calc：

来做到这一点

width: calc(100% + 1px);

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

Answer 7

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