为什么HTML5忽略行高小于font-size？

本文介绍了为什么HTML5忽略行高小于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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！