Firefox中的跨度高度

问题描述 投票:16回答:9

使用CSS,

我正在尝试在Firefox中指定span标签的高度,但它只是不接受它(IE确实很有趣)。

如果我使用height,Firefox会接受div,但是使用div的问题是它之后令人讨厌的换行符,在这种情况下我无法做到这一点。

我尝试将div的CSS样式属性设置为:

display:inline
,但是Firefox似乎还是将其恢复为span行为,并再次忽略了height属性。
html css firefox cross-browser
9个回答
17
投票
<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的容器足够宽以适合它们,就可以了。


32
投票

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

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

请注意,如果inline-block在怪癖模式下运行,则不允许您在Firefox上的元素内设置文本对齐方式。据我所知,所有其他浏览器都允许这样做。如果要在怪癖模式下运行时设置文本对齐方式,则必须使用属性-moz-inline-stack而不是inline-block。请记住,这是仅适用于Mozilla的属性,因此您必须进行一些浏览器检测以确保只有Mozilla能够获得此功能,而其他浏览器则获得标准的inline-block


17
投票

内联元素不能具有这样的高度(也不能是宽度)。默认情况下,SPAN已为display: inline。在这种情况下,Internet Explorer实际上是损坏的浏览器。


2
投票

由于要内联显示,因此高度应设置为line-height属性的高度。

根据布局的方式,您可以始终在span / div上使用float:left或float:right来防止换行。但是,如果您想在句子的中间使用该选项,则可以选择。


1
投票

问题是'display:inline'无法获得关联的高度,因为inline是从内容中获取其高度。无论如何,如何定义在行尾断开的框的高度?

您可以尝试设置'line-height',或者,如果这不能使您满意,请设置填充:

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

1
投票

仅当将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
投票

要设置跨度的高度,在Firefox中应该起作用

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

0
投票

元素内的文本对齐方式,您可以使用padding和block-inline属性进行调整。显示:行内块; padding-top:3px;例如


0
投票

height中的[em = relative line-height

例如height:1.1emline-height:1.1

= 100%填充

© www.soinside.com 2019 - 2024. All rights reserved.