Browser Compatability


Quirks Mode

Deliberately turn on quirks mode to test how your pages will appear on older browsers.

The purpose of quirks mode is to make pages that were designed for the old browsers display the same in the newer browsers.  You get Quirks Mode by having no DOCTYPE.

Internet Explorer Conditional Statements

Non-IE browsers will interpret them simply as comments.  Sample syntax:

1

2

3

<!--[if IE 7]>

    HTML Code only shows up on Internet Explorer 7

<![endif]-->

Other operators you can use:

<!--[if ! IE 7]>

<!--[if lt IE 7]>

<!--[if gt IE 7]>

<!--[if lte IE 7]>

<!--[if gte IE 7]>

Known Problems

  • When using fieldsets, the position of the legend is messed up
  • Invalid HTML being tolerated by some browsers but not others.  Close all your <p> tags.  Use a validator to check for correctness.
  • Don’t rely on CSS to do Image Resizing.  Browsers will botch it.  Have the image on the server be the actual dimensions you want it to appear
  • Clear your floats, and use  “overflow: auto;” or “overflow:hidden;” to make sure that an enclosing div fully surrounds its containing divs
  • Set your font sizes as percentages of the by setting your font as a percentage of the default size (16px) in the body tag.
  • IE6 will double the margin that is in the same direction of a float. For example, if you float two boxes to the left and next to each other and the left box has a left margin of 10px, in IE6 you will get a left margin (on the left box) of 20px.
  • IE8 does not have the javascript method Object.create().  Best workaround is to use a polyfill.

Good Practices

  • Use a CSS reset to override baseline CSS peculiar to each browser
  • Use libraries that have addressed all the browser peculiarities, like jQuery, Mootools
  • Use Quirksmode.com to check where there are frailties
  • Use Browsershots.org to check how your site appears on other browsers
  • Fail gracefully:  if your site had all the CSS and javascript taken away, would it still be readable?
  • Use a polyfill framework to make HTML5 compliant
  • Conditional inclusion of a css file, one for standards compliant, one for IE

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.