HTML锚定高度问题与无单位线高 [英] Html anchor height issue with unitless line heights
问题描述
尝试符合无单元行高我对overflow: auto和锚元素有问题.
考虑以下简单页面:
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>
font-size: 12px和line-height: 1的组合应使段落和锚点的高度(不带填充，边距和边框)为12个像素.
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.
因此，页面的总高度应为:4 * 12 = 48像素(2个元素加上该段落的2 * 12像素页边距).但是，几乎每个浏览器都会保留"两个或三个额外像素来突出锚点(即使我使用了text-decoration: none). Firefox 7，Chrome 14和Opera 11.51都显示了这种行为，令人惊讶的是IE9可以正常工作:).
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 :).
使用它们各自的开发人员工具栏，您可以看到所有浏览器都同意div元素的高度为48像素，但是只有IE认为锚点的高度为12像素.其他浏览器说14或15像素，导致滚动条出现.
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.
当删除overflow: auto不是一个选项时(在我的情况下，div是由框架生成的，有时只包含浮动元素，因此溢出用于扩展div以封装其子级)，是否有任何适当的方法?解决办法?即比给锚font-size: 15px或line-height: 1.2或其他东西更好.
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.
干杯， 茉莉花
推荐答案
仅当a直接接触#wrapper的底部时，才会出现此问题.这意味着您可以通过3种方式解决问题:
The issue only seems to happen if the a is touching the bottom of #wrapper directly. This means you can solve the problem in 3 ways:
- 将链接放入段落
- 在链接上设置显示块并为其留一个边距
- 在包装纸上设置填充底部
您必须决定是否找到这些更干净"的东西.
You'll have to decide if you find these more "clean".
这篇关于HTML锚定高度问题与无单位线高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
