Firefox переполнен правым краем?

Question

Кажется, в Firefox есть ошибка, когда, если я помещаю что-нибудь в правый край контейнера (используя text-align или float), он делает контейнер больше, чем должен быть.

Так например -

<div style='width:100px; overflow:auto'>
    <div style='width:50px; float:left;'>Something</div>

    <div style='width:50px; float:right;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

Создает полосу прокрутки в Firefox, кажется, отлично работает в Chrome. Есть идеи?

Answer 1

То, что вы видите, - это то, что текст фактически переполняет свой контейнер, потому что нарисованные размеры текста могут быть больше, чем его размеры макета. Это особенно заметно с курсивным текстом, но может произойти с любым текстом, особенно с субпиксельной разметкой и сглаживанием.

Chrome не создает подпиксельные макеты, поэтому он просто игнорирует переполненный текст.

Ваша самая простая ставка - просто оформить ваш правильный float как overflow:hidden.

Answer 2

Он ведет себя так, как должен.Вы не указываете, какие версии Firefox и Chrome вы используете, но для меня с FF 9.0 и Chrome 16 они ведут себя одинаково, то есть появляется полоса прокрутки.Это потому, что ваш контент выходит за пределы определенной ширины, а значение по умолчанию для переполнения является «видимым», поэтому h1 в вашем плавающем справа элементе div выходит за границы элемента div.Если вы измените свой h1, скажем, на тег ap, вы заметите, что полоса прокрутки исчезает.

Применение границы покажет, что происходит с блочной моделью (скопируйте / вставьте, чтобы увидеть, как содержимое выходит за границы):

<div style='width:104px; overflow:auto;'>
    <div style='width:50px; float:left; border:1px solid red;'>Something</div>

    <div style='width:50px; float:right; border:1px solid red;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

Итак, опять же, он ведет себя так, как должен.Если ваш контент выходит за пределы ширины контейнера и значение переполнения не назначается, по умолчанию значение overflow равно видимому, и содержимое отображает и «выталкивает» границы контейнера.В этом случае, поскольку ваш внешний контейнер имеет переполнение: авто, вы видите полосу прокрутки.

Answer 3

Извините, перечитайте ваш вопрос, вы можете удалить полосу прокрутки следующим образом:

<div style='width:100px; overflow:hidden'>
    <div style='width:50px; float:left;'>Something</div>

    <div style='width:50px; float:right;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

вы потеряете 1px контента, который вы

Answer 4

Когда я делаю связь с объектами, я делаю

<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>

<div style='width:49px; float:right;'>
    <h1 style='text-align:right;'>Title</h1>
</div>

этот пробел не поможет, но я должен сделать это много, когда использую% 's