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

我正在将一些页面转换为HTML5，其中包含需要设置为真正小的行高的标题。现在自<！DOCTYPE html>字体大小以下的任何行高都会被忽略。我可以把它们全部放在我想要的地方，但没有机会把他们放在一起。
任何人都知道为什么会这样，如果它是可治愈的？
谢谢，
托马斯

编辑：找到它。我的旧标记是< a style =“line-height：12px;” HREF = “#” >东西< / A>它在XHTML 1.0中过渡而不是HTML5。
我将其更改为< div style =“line-height：12px;”>< a href =“#”> something< / a>一个工作！
谢谢！

解决方法

您的< a>标签是一个内联元素，并且它出现在HTML5内联元素中，它们依赖于其父“块”元素的线高度(或一直到< body>样式，如果是直接父代)。

例：

body { line-height:20px; } 
a { line-height:12px; }

和这个标记：

<body>
    <a href="#">test</a>
</body>

< a>标签的行高为20像素，不能为12像素。

所以你的’inline’< a style =“line-height：12px;” HREF = “#” >东西< / A>没有工作，但是当你把它包裹在'block'级'&div。因为块元素可以规定行高。通过将内嵌元素包装在块元素中，通过使用CSS来使标签显示“inline-block”，这比通过将内嵌元素封装在块元素中更好的方法。 < a style =“display：inline-block; line-height：12px;” HREF = “#” >东西< / A> 更好的是，给你的< a>一个类(将“xx”更改为某个语义)：

<a class="xx" href="#">something</a>

然后在你的CSS文件中将该类设置为’inline-block’：

.xx { display:inline-block; line-height:12px; }

希望有帮助。

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

解决方法

相关文章