Html anchor height issue with unitless line heights_问答_开发者

Html anchor height issue with unitless line heights

开发者 https://www.devze.com 2023-04-10 17:41 出处：网络

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

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 somethin开发者_如何学JAVAg.

Cheers, Moolie

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: