Firefox中的SPAN高度

Question

使用CSS,我试图在Firefox中指定SPAN标记的高度,但它只是不接受它(IE确实如此,有趣的是).

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

我尝试设置CSS样式属性:

display: inline

对于DIV,但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的容器足够宽以便它们适合,这应该没问题.