Question

尝试符合unitless line heights我对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是由框架生成的，有时只包含浮动元素，所以溢出用于扩展div以封装其子代），是否存在任何适当的解决方案？即比给予font-size: 15px或line-height: 1.2或其他东西更好。

干杯， Moolie

Answer 1

如果a直接触及#wrapper的底部，则似乎只会出现此问题。这意味着您可以通过3种方式解决问题：

将链接放入段落
在链接上设置显示块并给它留一个余量
在包装器上设置填充底部

你必须决定是否发现这些更“干净”。

Html锚点高度问题与无单位线高度

1 个答案: