Фиксация 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> В конечном итоге будут вынуждены вниз к следующей строке. Если вы сделаете то же самое в Firefox и IE, оба <div> A и B останутся в одной строке.

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

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

Огромное спасибо вам всем.

EDIT: закачано скриншот здесь: http://img52.imageshack.us/i/screenshot1xd.jpg/

Answer 1

На ваш первый DIV, добавить следующее:

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

Смотрите, если это помогает.

Answer 2

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

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

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

Answer 3

прекрасно работает на моем Chrome 5.

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

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

Answer 4

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