Граница исчезает в Chrome, когда указан процент высоты

У меня есть div с рамкой в ​​1 пиксель и height: 29%. Chrome по какой-то причине отображает его без нижней границы.

См. http://jsfiddle.net/9WVuC/4/.

Эта проблема зависит от фактического процентного значения и размера контейнера; когда я их меняю, граница иногда появляется, а иногда исчезает. Кажется, что в механизме рендеринга Chrome есть ошибка округления, когда он вычисляет фактическую высоту div. Кроме того, это происходит, только если для этого div указаны overflow и position.

Это известная ошибка и, возможно, существует какое-то обходное решение? Конечно, я могу избавиться от этих процентных значений, пересчитав высоту вручную и установив ее с помощью JS, но это не очень элегантное решение.


google-chrome css border percentage
person user767343    schedule 18.10.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

это из-за стиля overflow:hidden;, который у вас есть в div, граница фактически появляется за пределами рассматриваемого div, поэтому в соответствии с высотой div (с учетом %) эта граница не учитывается.

Глядя на ваш код, я бы рекомендовал переместить ваш overflow:hidden; в содержащий элемент div (td), который устраняет проблему и окажет такое же влияние на содержимое элемента class="lower", если он переполняется.

person JamieM23    schedule 18.10.2012
comment
Этот ответ я нашел полезным... в моем случае сработало добавление некоторого поля к дочернему элементу... на случай, если это поможет кому-то еще - person byronyasgur; 03.03.2015

arrow_upward
0
arrow_downward

Вы можете исправить эту «ошибку», установив высоту на height: 28.95%;

Убедитесь, что вы не используете таблицы для макета. Их следует использовать только для табличных данных.

person JimmyRare    schedule 18.10.2012
comment
Изменение процента высоты решает проблему только для этой конкретной ситуации, но если я изменю высоту контейнера, граница снова исчезнет - JSFiddle. К сожалению, в моей ситуации возможна разная высота (размер контейнера можно изменить). Но спасибо. - person user767343; 18.10.2012

arrow_upward
0
arrow_downward

уменьшить высоту или убрать переполнение: скрыто

lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}

демонстрация скрипта

person Selvamani    schedule 18.10.2012
comment
К сожалению, изменение процента высоты помогает только для высоты конкретного контейнера (см. мой комментарий к ответу JimmyRare). overflow: hidden необходимо в моей ситуации. - person user767343; 18.10.2012
comment
Да, ты прав. Ошибка вызвана границей (граница-высота) поля. поэтому вы должны изменить значение высоты. лучше установить значение высоты как 28%. - person Selvamani; 18.10.2012

arrow_upward
0
arrow_downward

Вероятно, это проблема рендеринга, зависящая от размера экрана/окна и вычисленного размера элемента (с десятичными знаками). Обходной путь для меня заключался в том, чтобы поместить невидимый box-shadow там, где отсутствует граница, и это исправляет рендеринг. Для нижней границы это будет выглядеть так:

box-shadow: 0 1px 0 0 rgba(255,255,255,0);
person Duben Latex    schedule 11.10.2016
comment
не решил проблему с хромом для меня - person eyal_katz; 16.11.2016