Высота тега span в Firefox

Поскольку вы показываете его встроенным, высота должна быть установлена ​​на уровне вашего атрибута line-height.

В зависимости от того, как он выложен, вы всегда можете использовать float: left или float: right в диапазоне / div, чтобы предотвратить разрыв строки. Но если вы хотите, чтобы это было в середине предложения, такой возможности нет.

Встроенные элементы не могут иметь такую ​​высоту (или ширину). SPAN уже по умолчанию display: inline. В этом случае Internet Explorer на самом деле является сломанным браузером.

Вы можете изменить высоту (и ширину) элемента span, только если для него установлено значение display: block;. Это потому, что обычно это встроенный элемент. div обычно устанавливается на display: block;.

Решением может быть использование:

<div style = "background: #f00;">
    Text <span style = "padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Проблема в том, что 'display: inline' не может связать высоту, потому что, будучи встроенным, он получает свою высоту из своего содержимого. В любом случае, как определить высоту прямоугольника, который разорван в конце строки?

Вместо этого вы можете попробовать установить line-height или, если это не сработает, установите отступ:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id = "div1">FirstDiv</div>
<div id = "div2">SecondDiv</div>

Пока контейнер для всего, что содержит div's 1 и 2, достаточно широк, чтобы они могли поместиться, этого должно быть хорошо.

Вы можете установить для любого элемента значение display: inline-block, чтобы он мог получать высоту или ширину. Это также позволяет вам применять к элементу любые другие «стили блока».

Однако следует соблюдать осторожность, поскольку Firefox 2 не поддерживает это свойство. Firefox 3 - первый браузер на основе Mozilla, поддерживающий это свойство. Все остальные браузеры поддерживают это свойство, включая Internet Explorer.

Имейте в виду, что inline-block не позволяет вам устанавливать выравнивание текста внутри элемента в Firefox при работе в режиме совместимости. Насколько мне известно, все остальные браузеры позволяют это. Если вы хотите установить выравнивание текста во время работы в режиме совместимости, вам придется использовать свойство -moz-inline-stack вместо inline-block. Имейте в виду, что это свойство доступно только для Mozilla, поэтому вам нужно будет выполнить некоторое обнаружение браузера, чтобы убедиться, что только Mozilla получает его, а другие браузеры получают стандартный inline-block.

height в em = relative line-height

например height:1.1em с line-height:1.1

= 100% заполнено

выравнивание текста внутри элемента можно настроить с помощью атрибутов padding и block-inline. дисплей: встроенный блок; padding-top: 3 пикселя; Например

Чтобы установить высоту пролета, следующее должно работать в firefox

span {
  display: block;
  height: 50px;
}