87287

IE9 exibits 4px offset compared to IE8

Question:

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">

<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.

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.

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.

Recommend

  • HTML & XHTML id attribute question
  • Updating ASP.NET UpdatePanel during processing loop
  • PHP Session check not working when i redirect from another page
  • Global results with Struts 2 and convention plugin
  • Setting up Subversion Server on Mac OS mountain lion (have access via browser, but un-able to checko
  • Xcode 4.6 automatic entitlement not working - “no valid aps-environment”
  • How to validate DTD against XML in Node.js
  • Login form issue with spring security 2.0.7 and spring 2.5
  • Dynamic Event Handler not Firing
  • a:first-child modifying all links within my list
  • How to forcefully download .csv file instead of getting in open on browser in html
  • Reading from Windows registry in Perl [duplicate]
  • Why is this button causing my layout to break?
  • Hibernate - Cannot connect to DB
  • What is the best way to include a style sheet for a specific page?
  • How do I include screenshots of the full page in my serenity report (and not only of the viewport) u
  • ng-repeat not working with table but works with list
  • File loader changed image file name but not the file name in HTML file
  • Feature detection of foreignObject in SVG
  • Why does the font in these TD elements render at different sizes?
  • XSD with multi occurrences unordered
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • Redirect STDERR in OPEN pipe comand. Perl Linux
  • Jetty 9 HashLoginService
  • MongoError: Incorrect arguments
  • Read a local file using javascript
  • ImageMagick, replace semi-transparent white with opaque white
  • does jqgrid support a multiple checkbox list for editing
  • Cannot connect to cassandra from Spark
  • Optimizing database types to compact database (SQLite)
  • Cross-Platform Protobuf Serialization
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Do I've to free mysql result after storing it?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy