Добрый день!
На днях обновился до Google Chrome версии 37. Сегодня захожу на сайт и наблюдаю, что у меня везде, где стоят блоки с float: left
, поехала верстка. Причём это только в версии 37, в более старых всё нормально, в других браузерах тоже всё хорошо. Даже в ИЕ 7 всё хорошо. Кто знает, что там такого изменили в новой версии браузера?
Код примерно такой:
<div style="margin-left: -10px;">
<div style="float: left; width: 200px; margin-left: 10px;">Block 1</div>
<div style="float: left; width: 200px; margin-left: 10px;">Block 2</div>
<div style="float: left; width: 200px; margin-left: 10px;">Block 3</div>
<div style="float: left; width: 200px; margin-left: 10px;">Block 4</div>
</div>
Размеры проставлены таким образом, чтобы блоки пиксель в пиксель умещались в ширину родительского блока с учётом маргинов.
<!DOCTYPE html>
На скриншоте в ряд должно быть 3 картинки.
Обновление
P.S. Если у родительского блока строго задать ширину, тогда становится всё нормально. Т.е. если раньше ширина блока по умолчанию была 620 пикселей, то с margin-left: -10px;
она становилась 630 пикселей. Выходит, что в новой версии это изменили, и теперь надо указывать ширину строго: margin-left: -10px; width:
630px;
Понял, что такой глюк возникает, когда макет 2-колоночный. http://jsfiddle.net/2ysf6prx/1/ В старом хроме всё нормально, 3 колонки, а вот в новом - 2 колонки в строке. Если убрать этот div, то всё становится ок: <div style="float: left; width: 180px; background-color: yellow;">s</div>