我正在将一些页面切换到HTML5,其中包含需要使用非常小的行高设置的标题.现在,因为<!DOCTYPE html>忽略了font-size之下的任何行高.我可以随心所欲地将它们分开,但没有机会让它们更加紧密.任何人都知道为什么会这样,如果它可以治愈吗？
谢谢,托马斯
编辑:找到它.我的旧标记<a style="line-height:12px;" href="#">something</a>在XHTML 1.0过渡时起作用,但在HTML5中起作用.
我把它变成<div style="line-height:12px;"><a href="#">something</a>了有效的!
谢谢!
ucs*_*rge 50
您的<a>标记是一个内联元素,它出现在HTML5内联元素中,遵循其父"块"元素的行高(或者<body>如果它是直接父级,则一直到样式).
例:
body { line-height:20px; }
a { line-height:12px; }
和这个标记:
<body>
<a href="#">test</a>
</body>
该<a>标签将有20像素不12px的行高.
所以你的'inline' <a style="line-height:12px;" href="#">something</a>不起作用,但当你将它包装在'block'级<div>元素中时,因为块元素可以决定行高.
通过将内联元素包装在块元素中比使用标记膨胀更好的方法,只需使用CSS使标记显示"内联块".
<a style="display:inline-block; line-height:12px;" href="#">something</a>
更好的是,给你<a>一个类(将'xx'改为下面的语义):
<a class="xx" href="#">something</a>
然后在你的CSS文件中将该类设置为'inline-block':
.xx { display:inline-block; line-height:12px; }
希望有所帮助.