3
Эта проблема аналогична Chrome 37 calc roundingCSS известково() округление
Но реальная проблема была немного более сложным, и предлагаемое решение не работает для этого случая:
#outerDiv, #leftDiv, #middleDiv, #rightDiv{
height: 100px;
position: absolute;
}
#leftDiv, #rightDiv{
width: 20px;
z-index: 100;
background-color: green;
}
#outerDiv{
width: 100.5px;
z-index: 1;
background-color: red;
}
#middleDiv{
width: calc(100% - 40px);
z-index: 100;
background-color: blue;
left: 20px;
}
#leftDiv{
left: 0;
}
#rightDiv{
right: 0;
}<div id="outerDiv">
<div id="leftDiv">L</div>
<div id="middleDiv">M</div>
<div id="rightDiv">R</div>
</div>Результат в Chrome: http://i.imgur.com/vNvFfHC.jpg
Чтобы объяснить немного больше: ширина outerDi v зависит от случайного количества текста, который находится в другом div, который также находится внутри externalDiv. Левый и правый divs содержат изображение, поэтому их ширина статична.
Текущее решение, которое мы имеем, состоит в том, чтобы изменить вычет на: calc (100% - 40px + 1px); Есть ли лучшее решение?
пользователь предлагает закрытие: проблема видимость красной линии в Chrome. Вопрос заключается в том, как покрыть #outerDiv без перекрытия внутренними div. – recursive
Есть, по крайней мере, хорошее сравнение о ужасных различиях браузера относительно округления: http://cruft.io/posts/percentage-calculations-in-ie/ – sebilasse
Я знаю, что это довольно старый, но этот вопрос все еще появляется в Safari (MacOS). Есть ли какая-нибудь работа, которая работает для всех браузеров? Добавление 1px делает его странным в браузерах с хорошей работой calc(), например, Chrome и Firefox. – Froxx