Weird линии перерыв в пролете

По какой-то причине, следующий фрагмент кода HTML оборачивает % знак на новую строку (только FireFox):Weird линии перерыв в пролете

<span class="label"> 
    <input type="radio" /> 
    <span> 
     <span>1,22</span> 
     <span>%</span> 
     <br /> 
    </span> 
</span>

И CSS:

.label {display: inline-block;}

enter image description here

Его фрагмент, поэтому он не имеет особого смысла сам по себе, но я не понимаю, почему это происходит, я думаю, его действительный HTML5. Может кто-нибудь объяснить, что проблема с этим фрагментом, потому что он работает в Chrome, а не в FireFx?

DEMO

источник

2015-02-26 Jeanluca Scaljeri

Это выглядит хорошо для меня в ДЕМО в Chrome 40. Это конкретный браузер, который вызывает у вас проблемы? – MeanGreen

Зачем вы используете для этого 2 тега span? Не будет ли проще использовать 1 и добавить или вычесть символ% в js? – gaynorvader

В html, где извлекается этот фрагмент, первый 'span' на самом деле является« меткой ». Обратите внимание, что эта проблема возникает только в FF –

Firefox делает это неправильно.

Inline blocks следует использовать shrink-to-fit алгоритма:

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

вычислить предпочтительная минимальная ширина, например, используя все возможно линия перерывы.

найти доступную ширину : в этом случае, это ширина содержащего блока минус используемых значений «маржинальной налево», «границы-левой шириной», «обивки левого ',' padding-right ', ' border-right-width ',' margin-right 'и ширины любых соответствующих полос прокрутки .

Затем термоусадочные к монтажу ширина:

мин (макс (предпочтительная минимальная ширина, доступна ширина), Предпочтительно ширина)

В этом случае:

preferred width это ширина без какой-либо упаковки слов.
preferred minimum width - ширина самого широкого элемента, в данном случае «1,22».
available width - ширина тела документа, в данном случае 100%.

min(max(preferred minimum width,available width), preferred width) должно поэтому быть равно preferred width.

Вы можете исправить поведение Firefox, изменив свой HTML-код или используя white-space:nowrap.

Но у меня есть другая альтернатива: br является inline element, но изменить его на элемент блока фиксирует проблему.

Это не должно влиять ни на какие другие элементы br в вашем HTML (что я могу придумать).

Fiddle

источник

2015-02-26 17:18:47

Добавление white-space:nowrap; следует исправить:

.label { 
    background-color: yellow; 
    display: inline-block; 
    white-space:nowrap; 
}

jsFiddle example

источник

2015-02-26 14:48:28 j08691

Но не могли бы вы объяснить мне, почему Chrome отображает этот фрагмент просто отлично, а FF - нет? Поскольку существует множество решений, например, вы можете изменить '.label' css на:' display: inline' –

Насколько я могу судить, похоже, что завершающий '
' в FF позволяет механизму рендеринга создавать новой строки и сжимать блок встроенного блока, достаточный для того, чтобы% отбросить. Другие браузеры игнорируют пустую новую строку. – j08691

То, что происходит Firefox интерпретирует свой второй срок как рядный с <br/> элементом. Попробуйте поставить <br/> элемент вне диапазона обертывания 2 пролетов, как так:

<span class="label"> 
    <input type="radio" /> 
    <span> 
     <span>1,22</span> 
     <span>%</span> 

    </span> 
    <br /> 
</span>

http://jsfiddle.net/gc0sq29k/12/

источник

2015-02-26 14:54:18 gaynorvader

Хорошо спасибо за указание этого! Но имеет ли это смысл? –

Weird линии перерыв в пролете

ответ

Смежные вопросы