Неожиданный разрыв строки в Firefox с использованием float & overflow hidden

У меня есть контейнер div, который содержит два элемента: a .button и a .box с текстом внутри. .button идет первым и плавает вправо. .box не имеет float [это ограничение - я не могу его оставить из-за аналогичных других структур, зависящих от отсутствия float]. .box имеет overflow: hidden;, чтобы установить новый контекст форматирования блока. Это позволяет .box охватывать "100% до" ранее размещенного элемента, .button.

.outer-container размещает все эти данные и плавает вправо.

http://jsfiddle.net/6qAwA/5/

В Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac) и IE8-9 это будет действовать желаемым образом. .box текст остается в одной строке, а из-за .outer-container right float будет точно такой размер, который должен быть. Однако в Firefox текст разбит на другую строку.

Я также вижу аналогичную проблему, когда .button вместо этого перемещается влево - я получаю желаемое поведение во всем, кроме Firefox.

Я видел этот Firefox 16.0.1 и 19.0 для ПК и 18.0.1 и 19.0 для Mac. Это ошибка?

Ответы

Ответ 1

Добавьте display: inline-block; в .box:

Демо

Ответ 2

Сегодня я столкнулся с этой проблемой, когда плавающий node прерывал строку только в Firefox даже после установки ее display в inline-block, и причина в том, что контейнер node имел настройку стиля white-space, установленную на nowrap. Поэтому сброс значения white-space в normal в контейнере node разрешил эту проблему для меня.

Ответ 3

Собственно, когда вы идете на решение вроде http://jsfiddle.net/Volker_E/x5rPd/ вам не потребуется второй div для вашего желаемого поведения.

Ответ 4

white-space: normal не помогло. То, что работало, было white-space: nowrap; в контейнере прямого текста.