为什么HTML5忽略行高小于font-size？ [英] Why does HTML5 ignore line-height smaller than font-size?
问题描述
我将一些页面切换到HTML5，其中包含需要设置真正小的行高的标题。现在由于<！DOCTYPE html> 任何line-height低于font-size被忽略。我可以把他们所有我想要的空间，但没有机会使他们更紧密在一起。
任何人都知道为什么，如果可以治愈？
谢谢，
托马斯
编辑：找到了。我的旧标记为< a style =line-height：12px; href =＃> something< / a> 在XHTML 1.0转换中有效，但不在HTML5中。
我将其更改为< div style =line-height：12px;>< a href =＃> something< / a> 一个有效！
谢谢！ >
您的< a> 标记是一个内联元素， inline元素延伸到其父代'block'元素的line-height（或者一直到< body> 样式，如果是直接父代）。 >
示例：
body {line-height：20px; }
a {line-height：12px; }
和此标记：
< body>
< a href =＃>测试< / a>
< / body>
< a>
因此，'inline'< a style =line-height：12px; href =＃> something< / a> 无效，但是当您将其封装在块级别< div> 元素，因为块元素可以指定行高。
通过在块元素中包装您的内联元素，更好的方法来膨胀您的标记，只需使用CSS标签显示inline-block。
< a style =display：inline-block; line-height：12px; href =＃> something< / a>
更好的方法是：< a& / code>一个类（将'xx'改为以下语义）：
< a class =xx href =＃> something< / a>
然后在您的CSS文件中将该类设置为'inline-block'：
.xx {display：inline-block; line-height：12px; }
希望有帮助。
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
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!
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 ).
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.
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 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'.
<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 class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
这篇关于为什么HTML5忽略行高小于font-size？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
