IE9 exibits 4px offset compared to IE8

余生长醉 提交于 2020-02-07 07:12:44

问题


This happens to be the top padding plus the bottom padding on the element id f3c. I have attached two pics - one of IE8 and one of IE9.

I tried to capture the relevant information from the debugger. Basically I have a link inside a fieldset, inside a form. The fieldset is so the page validates.

I'm using relative positioning for the link (top:9px).

Not sure why IE9 would add in in 4px from IE8's calculation unless for some reason it is counting the (padding-top:2px and padding-bottom:2px).

ACTUAL DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


回答1:


Based on the screenshot, you're adding padding to an inline element.

Try adding:

display: inline-block;

And make the adjustments from there.

edit:

Inline elements don't apply margin/padding/width/height (well they shouldn't but browsers like ie have non-standard behaviours)

Block elements can have margin/padding/width/height but they cause elements to be stacked vertically.

inline-block is kind of a hybrid between them. They allow other inline elements to be placed vertically next to them, however you can also add margin/padding/width/height to them.

My general rule is that block level elements are the heavy construction elements in a page (the framework) where as inline is for the content within the page (bold, italics, etc). inline-block allows you to fudge inline elements a little with the margin, padding.

note: Just be aware that in older versions of ie this still isn't pixel perfect.




回答2:


In addition to Ben's answer, you might want to consider using Yahoo's YUI Reset CSS, which resolves the inconsistent styling between browsers.

To use it, just add this line to the head element of your HTML pages.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

You can view the full, unminified version of the reset css to see what it does here.




回答3:


Do you really have comment tags in front of the doctype as in the screenshot? If so, you are in quirks mode. Remove the comment tags.



来源:https://stackoverflow.com/questions/6905922/ie9-exibits-4px-offset-compared-to-ie8

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!