Question

使用CSS，我试图在Firefox中指定SPAN标记的高度，但它只是不接受它（IE确实如此，非常有趣）。

如果我使用DIV，Firefox接受高度，但使用DIV的问题是它之后的烦人换行，我在这个特定的实例中不能拥有。

我尝试为DIV设置：

display: inline

的CSS样式属性，但Firefox似乎还是会恢复为SPAN行为，并再次忽略height属性。

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>

只要容纳div 1和2的容器足够宽以便它们适合，这应该没问题。

Answer 4

由于您将其内联显示，因此高度应设置为line-height属性的高度。

根据其布局方式，您可以始终在span / div上使用float：left或float：以防止换行。但如果你想在一个句子的中间，那个选项就出来了。

Answer 5

当设置为display: block;时，您只能更改span元素的高度（和宽度）。这是因为它通常是内联元素。 div通常设置为display: block;。

解决方案可以是：

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

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

设置以下范围的高度应该适用于firefox

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

Answer 8

height = em

中的

relative line-height

例如height:1.1em与line-height:1.1

= 100％填充

Answer 9

元素内部的文本对齐，您可以使用padding和block-inline属性进行调整。显示：内联块;填充顶：3px的;例如

Firefox中的SPAN高度

9 个答案: