SPAN在Firefox中的高度

Question

使用CSS，我试图指定一个SPAN标签在Firefox中的高度，但它只是不接受它（IE浏览器，足够有趣）。

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

我试着为DIV设置：

display: inline

的CSS样式属性，但是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

由于您正在以内联方式显示它，因此应将高度设置为您的line-height属性的高度。

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

Answer 3

内联元素不能有这样的高度（或宽度）。默认情况下，SPAN已经是display: inline。在这种情况下，Internet Explorer实际上是破碎的浏览器。

Answer 4

当您将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 5

的问题是，“显示：内联”不能得到高度相关的，因为是线上，它得到其高度从它的内容。无论如何，你如何定义一个在行尾被打破的盒子的高度？

你可以尝试设置“行高”模式，或者如果这不起作用，让您满意，设置填充：只要

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

Answer 6

您可以将任何元素设置为display: inline-block以允许它接收高度或宽度。这也允许你将任何其他“块样式”应用于元素。

然而，要注意的一件事是Firefox 2不支持这个属性。 Firefox 3是第一款支持该属性的基于Mozilla的浏览器。所有其他浏览器都支持此属性，包括Internet Explorer。

请记住，inline-block不允许您在Firefox中的元素内部设置文本对齐方式（如果在怪癖模式下运行）。据我所知，所有其他浏览器都支持此功能。如果要在怪癖模式下运行时设置文本对齐方式，则必须使用属性-moz-inline-stack而不是inline-block。请记住，这是一个仅限Mozilla的属性，因此您必须执行一些浏览器检测，以确保只有Mozilla才能获取此内容，而其他浏览器则获得标准inline-block。

Answer 7

在em = relative line-height

例如height:1.1emheight与可以调整使用填充和块内联的属性的元素内line-height:1.1

= 100％填充

Answer 8

文本对齐。显示：内联块;填充顶：3px的;例如

Answer 9

要设置跨度以下的高度应在Firefox

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