Исправление изменения размера Chrome

Question

<div style="background-color:red;width: 300px;">


 <div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>

 <div style="float:left;border:1px solid green;">BBB BBB BBB</div>


 <div style="clear:both;"></div>

</div>

Вставка приведенного выше HTML здесь: http://htmledit.squarefree.com/

А затем уменьшите масштаб в Chrome, вы увидите, что <div> B в конечном итоге будет вынужден перейти к следующему ряду. Если вы делаете то же самое в Firefox и IE, оба <div> A и B останутся в одном ряду.

Добавление атрибута высоты на родительский элемент <div> может помочь, но если высота содержимого заранее не известна, это будет невозможно.

Я хотел бы знать, как эту проблему можно исправить в Chrome.

Большое спасибо всем вам.

РЕДАКТИРОВАТЬ: загрузил скриншот здесь: http://img52.imageshack.us/i/screenshot1xd.jpg/

Answer 1

Я тоже не могу воспроизвести это, но кажется, что вы только увеличиваете текст, и я не могу найти это в качестве опции в Chrome прямо сейчас.

Однако вы должны иметь в виду, что это всегда может произойти в любом браузере, если пользователь каким-то образом переопределяет указанный вами шрифт. Вы ничего не можете сделать, кроме как сделать свой макет достаточно гибким, чтобы справиться с ним. Например, в этом случае не устанавливайте ширину окружающего элемента в пикселях, но в em с, чтобы она была относительно размера шрифта.

Могут быть и другие решения, такие как использование других методов размещения элементов рядом друг с другом, но для этого потребуется, чтобы вы привели более конкретный пример того, чего вы пытаетесь достичь, особенно объясняя, что элементы не нужны завернуть.

Answer 2

В свой первый div, добавьте это:

<div style="background-color:red;width: 300px; white-space:nowrap;">

Посмотрите, поможет ли это.

Answer 3

попробуйте использовать атрибут max-width!

Answer 4

Отлично работает на моем Chrome 5.

Я мог бы предложить вам указать ширину родительского div вместо «em». Хотя кажется, что в вашей конкретной версии chrome была ошибка, которая уже исправлена:)

Другое решение состоит в том, чтобы установить nowrap, как предложено @Kyle, и вместо установки статической ширины - установить минимальную ширину. Таким образом, div будет расширяться, вместо того, чтобы потомки переходили на вторую строку ^ _ ^