Firefox 中的 span 标签高度

Question

使用 CSS，

我试图在 Firefox 中指定span标签的高度，但它只是不接受它（IE 接受）。

火狐接受的height ，如果我用一个div ，但与使用问题div是后烦人的线断裂，这是我不能在这种特定情况下有。

我尝试设置 CSS 样式属性：

display: inline

对于div ，但 Firefox 似乎无论如何都将其恢复为span行为，并再次忽略了height属性。

Answer 1

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

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

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

Answer 2

内联元素不能有这样的高度（也不能有宽度）。 SPAN 已经display: inline默认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's 1 和 2 的容器div's宽度足以让它们适合，这应该没问题。

Answer 4

由于您在内嵌显示它，因此高度应设置为 line-height 属性的高度。

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

Answer 5

只有当 span 元素设置为display: block;时，才能更改其高度（和宽度） display: block; . 这是因为它通常是一个内联元素。 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; 例如