无标题线高度的Html锚高度问题

试图遵守unitless line heights我有一个overflow: auto和锚元素的问题。考虑下面这个简单的页面：无标题线高度的Html锚高度问题

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

来源

2011-10-05 Moolie

这个问题似乎只如果a直接接触的#wrapper底部的出现。这意味着您可以在3种方式解决问题：

把链接到一个段落
集显示块的链接，并给它一个保证金
设置填充底部在包装

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

来源

2011-10-05 17:58:08 deviousdodo

设置填充底部似乎是对我最干净的解决方案。但它让你想知道为什么这些浏览器不能做数学。例如，Firebug能够确定链接的高度是14px。显然，渲染引擎并不总是使用计算出的儿童高度来确定元素的高度。我猜文字修饰选项并不是唯一改变元素尺寸的选项。 – Moolie

你可能很好的在这里找到你的答案：http://stackoverflow.com/questions/7665443/text-decoration-being-cut-off-by-overflowhidden-in-certain-browsers/7665854这是非常奇特的有这些2个问题一个接一个发布得如此之快，这凸显了浏览器引擎工作人员的困难程度。 – deviousdodo

感谢指针draevor，确实奇特！ – Moolie

无标题线高度的Html锚高度问题

回答

相关问题