5

Добрый день!

На днях обновился до 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>

1 ответ 1

2

Часто пользуюсь таким приёмом, у меня всё корректно. И ваш пример корректен тоже: http://jsfiddle.net/alpha9000/2ysf6prx/

1
  • Понял, что такой глюк возникает, когда макет 2-колоночный. jsfiddle.net/2ysf6prx/1 В старом хроме всё нормально, 3 колонки, а вот в новом - 2 колонки в строке. Если убрать этот div, то всё становится ок: <div style="float: left; width: 180px; background-color: yellow;">s</div>
    – Jeid
    1 сен 2014 в 12:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.