Высота SPAN в Firefox

Question

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

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

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

display: inline

для DIV, но Firefox все равно возвращается к поведению SPAN и игнорирует атрибут высоты еще раз.

Answer 1

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

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

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

Answer 2

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

Answer 3

<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>

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

height в em = relative line-height

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

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