• Developing Sites for IE7 Compatibility

    by  • May 20, 2015 • Journal • 0 Comments

    When it comes to web design, one of the biggest set backs is trying to accomodate older browsers. Gone are the days where you could put a label stating ‘Best viewed in Netscape’, users expect websites to just work or degrade gracefully.

    IE6 for the most part has been the nightmare of most developers however with newer versions of IE emerging, another issue has been arising …IE7

    Why you ask IE7, well if you are on an intranet or in compatibility mode, websites will be rendered to be IE7 compliant. Thus now the lowest common denominator for most developers is IE7.

    I have stumbled over many issues but below are a few tips to get you started, especially if you already have a website you are trying to make IE7 compatible.

    CSS Rendering in IE

    IE 7 & 8 use parts of CSS2 but only IE9 onwards use CSS3. To get an overview of what is and is not supported visit the CSS documentation over at Microsoft. With each element MS shows which browsers they are compatible with.

    http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx

    Note: Some CSS3 expressions can be represented in CSS2 alas just more verbose, there are some however which require additional Javascript to replicate. For best compatibility, where possible use valid CSS2 expressions.

    IE6/7 does not understand CSS chaining:

    div.box.featured {}
    div.featured {}

    So, IE6/7 reads div.box.featured as div.featured

    CSS Parsing

    Note: The IE7 CSS Parsing engine is quite crude by todays standards, thus you have to stick closely to the Microsoft specifications.

    Get rid of the descendant selector (the space).

    div .requiredMsg

    becomes:

    div.requiredMsg

    IE 7, if there’s only a comment—without any additional whitespace—between two simple selectors, that comment is incorrectly treated as a descendant selector, when in fact it should fail.

    CSS Support

    Certain CSS tags that will not work in IE7 due to no or lacking support:

    box-shadow
    box-sizing

    Internet Explorer <= 7 versions don’t support the value inherit for any properties other than direction and visibility.

    How to push CSS compatibility mode for IE8 and below(CSS2)

    <!–[if lt IE 9]>
    <link rel=”stylesheet” type=”text/css” href=”stylesheets/style_compatibility.css” />
    <![endif]–>
    <!–[if (gt IE 9)|!(IE)]><!–>
    <link rel=”stylesheet” type=”text/css”  href=”stylesheets/style.css” />
    <!–<![endif]–>

    <!–[if IE 8]>
    <p>You should only see this in IE8 mode.</p>
    <![endif]–>

    Only supported in legacy document modes of Internet Explorer (see http://msdn.microsoft.com/library/ms537512.aspx).
    In IE11 GA, legacy mode conditional comments are not enabled when choosing a document mode through F12 Developer Tools. Choosing a document mode through X-UA-Compatible, however, does enable conditional comments for the legacy mode.

    Force rendering in Edge Mode

    Works for internet but not intranet:
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” >

    header(‘X-UA-Compatible: IE=edge,chrome=1’);

    http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png

    Z-Index

    IE 7 requires position:relative in order to allow z-index

    e.g.

    #page ul li.button {
    z-index:4;
    }

    Will not work but the following will:

    #page ul li.button {
    position:relative;
    z-index:4;
    }

     

    General Differences

    If both a container and content are set to none, then the container set to visible, the hidden content becomes visible.

    IE7 rounds percentage-to-pixel calculations differently to future versions of IE

    Float does not render correctly with percentage widths for IE7

    float: left;
    width: 50%; <– Does not work

    float: left;
    width: 200px; <– Works

    IE7, Comments can not appear between selectors

    Note: https://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools

    IE6 & 7 did not parse underscores (_) correctly, thus they can be used on CSS for IE6/7 but would not be parsed by later browsers

    About

    Software engineer. Tea drinker

    http://MrPfister.com

    Leave a Reply

    Your email address will not be published. Required fields are marked *