无单位行高的 Html 锚点高度问题答案

【问题标题】：Html anchor height issue with unitless line heights无单位行高的 Html 锚点高度问题
【发布时间】：2011-10-06 01:58:08
【问题描述】：

试图符合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或其他东西更好。

干杯，莫莉

【问题讨论】：

标签： overflow anchor css

【解决方案1】：

只有当a 直接触及#wrapper 的底部时，才会出现此问题。这意味着您可以通过 3 种方式解决问题：

将链接放入段落中
在链接上设置显示块并给它一个边距
在包装上设置填充底部

你必须决定你是否觉得这些更“干净”。

【讨论】：

设置填充底部对我来说似乎是最干净的解决方案。但这让你想知道为什么这些浏览器不能做数学。例如，Firebug 能够确定链接的高度是 14px。显然，渲染引擎并不总是使用计算出的子元素的高度来确定元素的高度。我猜想 text-decoration 选项并不是唯一改变元素尺寸的选项。
您很可能会在这里找到答案：stackoverflow.com/questions/7665443/… 这两个问题一个接一个地发布得如此之快是很奇怪的，它突显了在浏览器上工作的人必须有多么困难引擎。