Высота SPAN в Firefox

Question

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

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

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

display: inline

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

Answer 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, достаточно широк, чтобы они могли поместиться, все должно быть в порядке.

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

Answer 9

height в em = relative line-height

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

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