HTML锚点高度问题与无单位行高

Question

HTML锚点高度问题与无单位行高

3

我尝试遵循无单位行高，但在使用overflow: auto和锚点元素时遇到问题。考虑以下简单页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>test</title>
  </head>
  <body style="font-family: arial; font-size: 12px; line-height: 1;">
    <div id="wrapper" style="overflow: auto; background-color: #FFCCCC;">
      <p>Blah blah blah</p>
      <a href="#" style="text-decoration: none;">Test</a>
    </div>
  </body>
</html>

font-size: 12px 和 line-height: 1 的组合应该使段落和锚点（不带填充、边距和边框）的高度为12像素。

因此，页面的总高度应为：4 * 12 = 48像素（2个元素加上2 * 12像素的段落边距）。然而，几乎每个浏览器都会“保留”两到三个额外像素来下划线锚点（即使我使用了text-decoration: none）。Firefox 7、Chrome 14和Opera 11.51都显示这种行为，令人惊讶的是IE9可以正常工作 :)

通过各自的开发者工具栏，您可以看到所有浏览器都认为div元素的高度为48像素，但只有IE认为锚点的高度为12像素。其他浏览器说是14或15像素，导致滚动条出现。

当删除 overflow: auto 不是一种选项时（在我的情况下， div 是由框架生成的，有时只包含浮动元素，因此使用 overflow 扩展 div 以封装其子元素），是否有任何适当的解决方案？比如给锚点设置font-size: 15px或line-height: 1.2之类的东西会更好吗？

谢谢， Moolie

- Moolie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deviousdodo · Accepted Answer

如果 a 直接触及到 #wrapper 的底部，这个问题就会出现。这意味着你可以用以下 3 种方法解决这个问题：

将链接放入段落中
在链接上设置 display block 并给它一个 margin
在包装器上设置 padding bottom

你需要决定是否认为这些方案更加“简洁”。