17

使用 CSS，

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

Firefox 接受heightif 我使用 a div，但使用 a 的问题div是它后面的令人讨厌的换行符，在这个特定情况下我不能这样做。

我尝试设置 CSS 样式属性：

显示：内联
对于div, 但 Firefox 似乎span无论如何都会将其恢复为行为并height再次忽略该属性。

4

9 回答 9

32

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

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

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

于 2008-08-24T15:19:57.007 回答
17

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

于 2008-08-24T13:42:46.180 回答
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's1 和 2 的容器足够宽以容纳它们，这应该没问题。

于 2008-08-24T13:47:05.343 回答
2

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

根据布局的不同，您始终可以在 span/div 上使用 float:left 或 float:right 来防止换行。但是，如果您希望它在句子中间，则该选项不可用。

于 2008-08-24T13:41:59.753 回答
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>
于 2008-08-24T13:44:11.557 回答
1

问题是“显示：内联”无法获得关联的高度，因为内联时，它从内容中获取高度。无论如何，你如何定义一个在行尾被打破的盒子的高度？

您可以尝试设置 'line-height'，或者如果这不能让您满意，请设置填充：

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;
于 2008-08-24T13:44:33.680 回答
1

要设置跨度的高度，应该在 Firefox 中工作

span {
  display: block;
  height: 50px;
}
于 2009-05-26T08:26:52.290 回答
0

height在em=relative line-height

例如height:1.1em与line-height:1.1

= 100% 填充

于 2009-04-05T16:40:03.977 回答
0

您可以使用 padding 和 block-inline 属性调整元素内的文本对齐方式。显示：内联块；填充顶部：3px；例如

于 2009-04-08T19:19:16.143 回答