Html 为什么 HTML5 忽略小于字体大小的行高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5014617/
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
Why does HTML5 ignore line-height smaller than font-size?
提问by thomas
i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html>any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together.
Anyone know why that is and if it's cureable?
Thanks,
thomas
我正在将一些页面切换到 HTML5，其中包含需要设置非常小的行高的标题。现在因为<!DOCTYPE html>任何低于字体大小的行高都被忽略了。我可以随心所欲地将它们隔开，但没有机会将它们拉得更近。有谁知道为什么会这样，是否可以治愈？
谢谢，托马斯
Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a>which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;"><a href="#">something</a>an that works!
Thanks!
编辑：找到了。我的旧标记<a style="line-height:12px;" href="#">something</a>在 XHTML 1.0 过渡中有效，但在 HTML5 中无效。
我把它改成了<div style="line-height:12px;"><a href="#">something</a>一个有效的！
谢谢！
回答by ucsarge
Your <a>tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body>style if that is the immediate parent ).
您的<a>标签是一个内联元素，它出现在 HTML5 内联元素中，遵循其父“块”元素的行高（或者一直到<body>样式，如果它是直接父元素）。
Example:
例子：
body { line-height:20px; }
a { line-height:12px; }
and this markup:
和这个标记：
<body>
<a href="#">test</a>
</body>
The <a>tag will have a line-height of 20px not 12px.
该<a>标签将有20像素不12px的行高。
So your 'inline' <a style="line-height:12px;" href="#">something</a>didn't work but did when you wrapped it in the 'block'-level <div>element because block elements can dictate line-height.
因此，您的“内联”<a style="line-height:12px;" href="#">something</a>不起作用，但是当您将其包装在“<div>块”级元素中时却起作用了，因为块元素可以指定行高。
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
比通过将内联元素包装在块元素中来膨胀标记更好的方法，只需使用 CSS 使标签显示为“内联块”。
<a style="display:inline-block; line-height:12px;" href="#">something</a>
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a>a class (change 'xx' below to something semantic):
更好的是，给你<a>一个类（将下面的“xx”更改为语义）：
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
然后在您的 CSS 文件中将该类设置为“inline-block”：
.xx { display:inline-block; line-height:12px; }
Hope that helps.
希望有帮助。
回答by Emily
Do you have some code? Do you have some extraneous padding or margins?
你有一些代码吗？你有一些多余的填充或边距吗？
This works for me in Firefox, Chrome, and IE8
这在 Firefox、Chrome 和 IE8 中对我有用
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
回答by xwchris
In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.
在我的理解中，每个块级元素都有一个宽度为 0 的字符，称为“strut”。它将参与线框高度的计算。当孩子的行高小于父母的行高时，看起来孩子的行高被忽略了，因为当孩子的行高较小时，父母的行高会撑起行框。
回答by frontsideup
You need to use emas big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:
您需要在 IE8 和 IE7 中使用em作为大文本大小不会共享相同的行高...例如使用 30px 字体大小：
This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF.
此示例显示，对于 30px 文本大小，IE7 和 IE8 中的行高与 Chrome 和 FF 不相同。
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise.
此示例显示使用 em 所有浏览器显示相同的行高。em 是一个旧系统，尽管我们需要使用它直到 IE8 及以下版本消亡。这是很好的做法。
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
