display：table div with percentage width 1px bug [英] display:table div with percentage width 1px bug

问题描述

外部 div 有百分比宽度，内部 div 有 tabel; width：100％。

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

---

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

1. 您可以使用绝对单位或
定义父元素的宽度。

2. 也可以将 display：table 应用于容器元素。这并不能真正解决错误，但它不应该被注意到（因为它也会影响父元素）。

The outer div have percentage width, and inner div's have display: tabel; width: 100%.

The inner div's show 1px less than outer div for some page widths while resizing. This adds an 1px line to the right.

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

Is there any fix for the bug?

解决方案

This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371

The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements

---

You can fix this issue in 2 different ways

1. You could define the width of parent element with an absolute unit or
2. You could apply display: table also to the container element. This doesn't really solve the bug but it should not be noticeable anymore (because it will affect also the parent element).

这篇关于display：table div with percentage width 1px bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！