发表新帖
发表新帖

html5 vertical spacing issue with

后端 未结
关注
4 1640
南旧
南旧 2020-11-28 11:06

I am trying to create a layout where the vertical spacing between divs is pixel perfect. So far I\'ve ruled out almost all the big grid systems (960.gs, Blueprint), because

相关标签:
4条回答
  • 日久生厌
    2020-11-28 11:07

    Try this code:

    <html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
  <span>100px</span>
  <div>100px</div>
</body>
</html>

    When you consider that <img> is an inline element like <span>...I think most of your questions are answered.

    Without the width/height attributes, your dependent on each browsers rendering engine to being identical (they're not). So pixel perfect won't work until you tell the browsers how many pixels to use.

    0 讨论(0)
  • 一整个雨季
    2020-11-28 11:20

    The vertical-align: baseline is causing the gap at the bottom of your images.

    In Strict doctypes, images are inline elements and behave like text. Aligning inline elements at the baseline causes them to leave room for text descenders even if there is not any text.

    Adding img { vertical-align: bottom } to your reset stylesheet will fix the problem.

    0 讨论(0)
  • 不要未来只要你来
    2020-11-28 11:25

    I feel like this can't be the answer you're looking for. It's too short:

    Add to the CSS of your HTML5 page: img { display: block }.

    Testing in Firefox and Chrome, doing that gets pixel perfect identical rendering between your two pages.

    0 讨论(0)
  • 死守一世寂寞
    2020-11-28 11:29

    Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block?

    First of all, browsers do not have a "HTML5 mode". What they have are three modes "Quirks", "Limited Quirks" (aka Almost Standards) and "Standards" mode. There is only one difference between "Limited Quirks" and "Standards" modes and that relates to the way in which a line-height and baseline is established for the line box of which the <img> sits. In "Limited Quirks" mode, if there is no rendered text content on the line, then no baseline is established and the <img> sits on the bottom of the line box.

    In "Standards" mode, the line box always contains the space for the descenders of characters like g, p and y below the baseline, even if there are no real characters in that line box.The gap you see is the distance between the baseline and the bottom of the line box which is the space for those descenders. For a thorough description, see http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

    The remedy, then, is either to stop <img> being treated as an inline element { display:block; } or to override the vertical alignment of the <img> { vertical-align:bottom; }. Either will work.

    Why does XHTML Transitional not need this hack

    Using the XHTML Transitional doctype places the browser into "Limited Quirks" mode. Had you used XHTML Strict, or a full HTML4 Strict doctype, you would have seen the same gaps as you see with the HTML5 doctype as each of these places the browser in "Standards" mode.

    Why does XHTML Strict produce a vertical gap too

    See above.

    Is it safe to use img { display: block; } in a reset.css sheet?

    Of course, but there will probably be times when you'll want <img> to be treated as an inline element. In those cases, you'll need to add CSS in the appropriate places to achieve that.

    0 讨论(0)
 看不清?
提交回复
热议问题