Html Firefox 中的 span 标签高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
span tag height in Firefox
提问by Steve M
Using CSS,
使用 CSS，
I'm trying to specify the height of a spantag in Firefox, but it's just not accepting it (IE does).
我试图span在 Firefox 中指定标签的高度，但它只是不接受它（IE 接受）。
Firefox accepts the heightif I use a div, but the problem with using a divis the annoying line break after it, which I can't have in this particular instance.
Firefox 接受heightif 我使用 a div，但使用 a的问题div是它后面令人讨厌的换行符，在这个特定的例子中我不能有。
I tried setting the CSS style attribute of:
我尝试设置 CSS 样式属性：
display: inline对于
divdiv，但 Firefox 似乎spanspan无论如何都将其恢复为行为并heightheight再次忽略该属性。回答by Dan Herbert
You can set any element to display: inline-blockto allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.
您可以将任何元素设置display: inline-block为允许其接收高度或宽度。这也允许您将任何其他“块样式”应用于元素。
One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.
但是需要注意的一件事是 Firefox 2 不支持此属性。Firefox 3 是第一个支持此属性的基于 Mozilla 的浏览器。所有其他浏览器都支持此属性，包括 Internet Explorer。
Keep in mind that inline-blockdoes not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you'll have to use the property -moz-inline-stackinstead of inline-block. Keep in mind this is a Mozilla-only property so you'll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard inline-block.
请记住，inline-block如果在 quirks 模式下运行，则不允许您在 Firefox 上的元素内设置文本对齐方式。据我所知，所有其他浏览器都允许这样做。如果要在 quirks 模式下运行时设置文本对齐方式，则必须使用 属性-moz-inline-stack而不是inline-block. 请记住，这是一个仅限 Mozilla 的属性，因此您必须进行一些浏览器检测以确保只有 Mozilla 可以获取此属性，而其他浏览器可以获取标准的inline-block.
回答by Cade
<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>
As long as the container for whatever is holding div's1 and 2 is wide enough for them to fit, this should be fine.
只要盛放div's1 和 2的容器足够宽以适合它们，这应该没问题。
回答by ceejayoz
Inline elements can't have heights (nor widths) like that. SPANs are already display: inlineby default. Internet Explorer is actually the broken browser in this case.
内联元素不能有这样的高度（也不能有宽度）。display: inline默认情况下，SPAN 已经是。在这种情况下，Internet Explorer 实际上是损坏的浏览器。
回答by Cade
Since you're displaying it inline, the height should be set at the height of your line-height attribute.
由于您在内嵌显示它，因此高度应设置为 line-height 属性的高度。
Depending on how it's laid out, you could always use float:left or float:right on the span/div to prevent the line break. But if you want it in the middle of a sentence, that option is out.
根据它的布局方式，您始终可以在 span/div 上使用 float:left 或 float:right 以防止换行。但是如果你想在句子中间使用它，这个选项就不行了。
回答by Ross
You can only change the height (and width) of a span element when it is set to display: block;. This is because it is an inline element normally. divis set to display: block;normally.
当 span 元素设置为 时，您只能更改它的高度（和宽度）display: block;。这是因为它通常是一个内联元素。div设置为display: block;正常。
A solution could be to use:
一个解决方案可能是使用：
<div style="background: #f00;">
Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>
回答by Konrad Rudolph
The problem is that 'display: inline' can't get a height associated because, being inline, it gets its height from its the content. Anyway, how do you define the height of a box that is broken at the end of a line?
问题是 'display: inline' 无法获得关联的高度，因为作为内联，它从其内容中获取高度。无论如何，您如何定义在行尾断开的框的高度？
You might try to set 'line-height' instead, or if this doesn't work to your satisfaction, set a padding:
您可以尝试设置 'line-height'，或者如果这不能让您满意，请设置一个填充：
/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;
回答by Konrad Rudolph
To set height of span following should work in firefox
要设置跨度以下的高度应该在 Firefox 中工作
span {
display: block;
height: 50px;
}
回答by Konrad Rudolph
heightin em= relative line-height
height在em=relative line-height
for example height:1.1emwith line-height:1.1
例如height:1.1em与line-height:1.1
= 100% filled
= 100% 填充
回答by Konrad Rudolph
text alignment inside the element you can adjust using the padding and block-inline attributes. display:inline-block; padding-top:3px; for example
您可以使用 padding 和 block-inline 属性调整元素内的文本对齐方式。显示：内联块；填充顶部：3px; 例如
