Высота SPAN в Firefox

Используя CSS, я пытаюсь указать высоту тега SPAN в Firefox, но он просто не принимает его (IE делает это, как ни странно).

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

Я попытался установить атрибут стиля CSS:

display: inline

для DIV, но Firefox, похоже, снова вернется к поведению SPAN и снова проигнорирует атрибут height.

Ответ 1

<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 1 и 2, достаточно широк для их соответствия, это должно быть хорошо.

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Решение может заключаться в использовании:

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

height в em= relative line-height

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

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

Ответ 9

выравнивание текста внутри элемента, который вы можете настроить, используя атрибуты padding и block-inline. Дисплей: встроенный блок; обивка-топ: 3px; например