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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<img alt="IE8" class="b-lazy" data-src="https://i.stack.imgur.com/FUgUP.png" data-original="https://i.stack.imgur.com/FUgUP.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
<img alt="IE9" class="b-lazy" data-src="https://i.stack.imgur.com/IvEUC.png" data-original="https://i.stack.imgur.com/IvEUC.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />Answer1:
Based on the screenshot, you're adding padding to an inline element.
And make the adjustments from there.
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.Answer2:
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 <a href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css" rel="nofollow">here</a>.Answer3:
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.