Display: таблица div с процентной шириной ошибка 1px

Внешний div имеет процентную ширину, а внутренний div имеет display: tabel; width: 100%.

Внутренний div показывает на 1px меньше, чем внешний div для некоторых ширины страницы при изменении размера. Это добавляет строку 1px вправо.

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

Есть ли какое-либо исправление для ошибки?

Ответ 1

Кажется, что это специфическая ошибка веб-кита: https://bugs.webkit.org/show_bug.cgi?id=140371

Ширина элемента display:table-* не всегда правильно вычисляется, если она содержится в родительском элементе, чей width не определен с абсолютной единицей. Вы можете увидеть эту проблему в действии здесь: Посмотрите на правую сторону красных элементов

Вы можете устранить эту проблему двумя разными способами.

Вы можете определить ширину родительского элемента с абсолютной единицей или
Вы также можете применить display: table к элементу контейнера. На самом деле это не решает проблему, но она больше не должна быть заметна (потому что она будет влиять и на родительский элемент).

Ответ 2

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

Просто измените свой код css следующим образом

Ответ 3

Ваша проблема возникает из-за ширины "60%" контейнера.

Хром усекает десятичные числа (300.5px станет 300px).
Поэтому, когда внутренний div установлен на "100%", он вычисляется по закругленной ширине родительского div

Итак, скажем, что внешний div равен 300.5px (60% от общего числа).
Внутренний div подсчитывается как 100% от 300 пикселей,

Ответ 4

Измените display:table на display:block.

Ответ 5

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

Заметки:

добавление 1px не решает проблему с WebKit... оно просто переворачивает его
добавление 0.5px приводит к проблеме в некоторых браузерах, не относящихся к WebKit… оборачивание в медиазапрос решает эту проблему

Ответ 6

Я знаю, что это довольно поздно, но здесь исправление для этой ошибки я тоже имел дело.

Как упоминалось в этом потоке, проблема заключается в использовании процента как единицы ширины. Браузер округляет десятичные значения до полного числа. Итак, все, что нам нужно сделать, это добавить 1 пиксель к проценту, основанному на. Мы можем сделать это с помощью calc:

width: calc(100% + 1px);

Это будет работать во всех основных браузерах, кроме IE 11 и старше.

Ответ 7

Использование display: table может привести к нежелательному побочному эффекту от применения стилей CSS css к div. Поэтому я выбрал display: contents для моего проекта.