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

发布于 2024-12-08 20:35:44 字数 1367 浏览 0 评论 0原文

试图符合无单位行高我有一个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 或其他东西更好。

干杯，莫利

原文

Trying to conform to unitless line heights I have a problem with overflow: auto and anchor elements.
Consider the following simple page:

<!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>

The combination of font-size: 12px and line-height: 1 should make the height of the paragraph and anchor (without padding, margin and border) 12 pixels.

The total height of the page should therefore be: 4 * 12 = 48 pixels (2 elements plus 2 * 12 pixels margin for the paragraph). However, almost every browser 'reserves' two or three extra pixels for underlining the anchor (even though I used text-decoration: none). Firefox 7, Chrome 14 and Opera 11.51 all show this behaviour, surprisingly IE9 works fine :).

With their respective developer toolbars, you can see that all browsers agree that the div element has a height of 48 pixels, but only IE thinks the anchors height is 12 pixels. Other browsers say 14 or 15 pixels, causing the scrollbar to appear.

When removing the overflow: auto is not an option (in my case the div is generated by a framework and sometimes just contains floating elements, so the overflow is used to extend the div to encapsulate its children), is there any proper solution to this? i.e. better than giving the anchor font-size: 15px or line-height: 1.2 or something.

Cheers,
Moolie

分享到QQ

分享到微博