使用CSS,
我正在尝试在Firefox中指定span
标签的高度,但它只是不接受它(IE确实很有趣)。
如果我使用height
,Firefox会接受div
,但是使用div
的问题是它之后令人讨厌的换行符,在这种情况下我无法做到这一点。
我尝试将div
的CSS样式属性设置为:
display:inline,但是Firefox似乎还是将其恢复为
span
行为,并再次忽略了height
属性。<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的容器足够宽以适合它们,就可以了。
您可以将任何元素设置为display: inline-block
,以使其接收高度或宽度。这也允许您将任何其他“块样式”应用于元素。
但是要注意的一件事是Firefox 2不支持此属性。 Firefox 3是第一个支持此属性的基于Mozilla的浏览器。所有其他浏览器都支持此属性,包括Internet Explorer。
请注意,如果inline-block
在怪癖模式下运行,则不允许您在Firefox上的元素内设置文本对齐方式。据我所知,所有其他浏览器都允许这样做。如果要在怪癖模式下运行时设置文本对齐方式,则必须使用属性-moz-inline-stack
而不是inline-block
。请记住,这是仅适用于Mozilla的属性,因此您必须进行一些浏览器检测以确保只有Mozilla能够获得此功能,而其他浏览器则获得标准的inline-block
。
内联元素不能具有这样的高度(也不能是宽度)。默认情况下,SPAN已为display: inline
。在这种情况下,Internet Explorer实际上是损坏的浏览器。
由于要内联显示,因此高度应设置为line-height属性的高度。
根据布局的方式,您可以始终在span / div上使用float:left或float:right来防止换行。但是,如果您想在句子的中间使用该选项,则可以选择。
问题是'display:inline'无法获得关联的高度,因为inline是从内容中获取其高度。无论如何,如何定义在行尾断开的框的高度?
您可以尝试设置'line-height',或者,如果这不能使您满意,请设置填充:
/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;
仅当将span元素设置为display: block;
时,才能更改其高度(和宽度)。这是因为它通常是一个内联元素。 div
通常设置为display: block;
。
解决方案可能是使用:
<div style="background: #f00;">
Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>
要设置跨度的高度,在Firefox中应该起作用
span {
display: block;
height: 50px;
}
元素内的文本对齐方式,您可以使用padding和block-inline属性进行调整。显示:行内块; padding-top:3px;例如
height
中的[em
= relative line-height
例如height:1.1em
和line-height:1.1
= 100%填充