4

I've found some references to bugs or issues in IE's interpretation of CSS, but the information seems rather scattered. I'd like to have a pointer to a comprehensive overview, if such an overview exists.

edit: it's already something that Microsoft is willing to list IE's CSS problems (thanks mouviciel->sanchothefat), but they're not going to offer workarounds, obviously. So workarounds would be nice too.

Thanks

stevenvh
  • 2,971
  • 9
  • 41
  • 54

8 Answers8

7

Check out Quirks Mode. It is a great resource for CSS compatibility across browsers.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
6

I find the best policy to avoid pain is to follow these rules:

  1. Build in a more-compliant and developer-friendly browser like firefox first, test thoroughly in IE (and safari/chrome(webkit) and opera) later
  2. Use a strict doctype- avoid quirks mode, since quirks are by definition not standard
  3. Use a reset style sheet
  4. Use a javascript framework like jQuery or Prototype - they can hide some javascript and DOM incompatibilities.
  5. Use good semantic layout- it's more likely to degrade nicely for a mis-behaving browser
  6. Accept that it won't be perfect and don't sweat the really small variances

Follow those rules I don't have as many problems in the first place.

Community
  • 1
  • 1
Joel Coehoorn
  • 399,467
  • 113
  • 570
  • 794
3

Me, I use the "Internet Explorer Exposed". Very in-depth resource.

montrealist
  • 5,593
  • 12
  • 46
  • 68
1

I find myself constantly referring to this page:

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

Salty
  • 6,688
  • 3
  • 33
  • 31
1

You may find some answers by consulting this SO question.

Community
  • 1
  • 1
mouviciel
  • 66,855
  • 13
  • 106
  • 140
1

For dropdownlists:

<select>
    <option value="1">1</option>
    ...
    <option value="N">N</option>
</select>

CSS border styles do not work:

If you'll try:

select
{
    border: solid 1px #0000ff;
}

nothing will happen.

Also a submit button will expand its width proportionally to the button text, until you give it the style:

input[type="submit"]
{
overflow:visible;
}

As well as many other funny things. :)

User
  • 30,403
  • 22
  • 79
  • 107
  • @dfa: Just checked it again, everything is working, in both IE8 and compatibility mode. – User Jul 19 '09 at 08:25
1

I swear by PositionIsEverything.

They maintain a list of bugs/oddities in most browsers. Check out their exhaustive list of Internet Explorer bugs, I hope you find it comprehensive enough.

ndorfin
  • 476
  • 2
  • 13
0

quirksmode has already been posted, but I'll add On having layout, which explains one of the principles underlying many of IE's oddities.

puetzk
  • 10,534
  • 3
  • 28
  • 32