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

Используя CSS,

Я пытаюсь указать высоту spanтега в Firefox, но он просто не принимает его (IE делает).

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

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

дисплей: встроенный
для div, но Firefox, кажется, spanвсе равно возвращает это поведение и игнорирует heightатрибут еще раз.

24.08.2008 13:40:00
9 ОТВЕТОВ
РЕШЕНИЕ
<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's1 и 2, достаточно широк, чтобы они могли поместиться, это должно быть хорошо.

17
26.02.2020 13:58:10

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

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

2
24.08.2008 13:41:59

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

17
24.08.2008 13:42:46

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

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

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>
1
24.08.2008 13:49:40
Не только. Это касается и отображения: inline-block, display: table и нескольких других.
Kornel 27.11.2008 20:04:48

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

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

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

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

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

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

32
9.12.2010 13:19:39
Вы можете обойтись без перехвата браузера, указав обе опции с опцией -moz одна секунда. Браузеры, не являющиеся Mozilla, будут игнорировать опцию -moz, но в Firefox будут отменять первый параметр. "display: inline-block; display: -moz-inline-stack;"
Joel Mueller 26.05.2009 18:16:02

heightв em=relative line-height

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

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

0
23.01.2012 13:07:15

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

0
8.04.2009 19:19:16

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

span {
  display: block;
  height: 50px;
}
1
14.01.2016 20:32:56