Thursday, March 31, 2011

What are some CSS bugs in IE?

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

From stackoverflow
  • I find myself constantly referring to this page:

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

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

  • You may find some answers by consulting this SO question.

  • 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. :)

    dfa : input[type="submit"] is not working on IE8
    User : @dfa: Just checked it again, everything is working, in both IE8 and compatibility mode.
  • 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.

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

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

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

0 comments:

Post a Comment