SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working around a serious IE8 bug

    I have a website with checkboxes and radio boxes that users print out. IE8 has a bug where form elements print as the page loaded, not modified by user actions or JavaScript (see, e.g., MSFT bug #431489).

    Fortunately, the bug only manifests when in IE8 standards mode. It doesn't happen in IE7, nor in IE8 under almost-standards mode or quirks mode.

    So I was looking for the best way to tell IE to use a lower mode. I decided that
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    was reasonably good: no problems in other browsers, and although I get the IE7 rendering bugs on the affected page, those are minor enough as long as I segregate the meta tag to only those few pages where it's needed.

    But then I noticed that my page isn't valid HTML5 with that tag, which bothers me. I tried to use
    Code:
    <!--[if IE 8]>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <![endif]-->
    or even
    Code:
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <![endif]-->
    but it looks like once it reads a conditional comment, it's too late to change X-UA-Compatible.

    Also, ideally I'd allow IE9 to display the page in IE9 mode rather than IE8 mode (for when it comes out). Any thoughts on how I can improve on any of these areas?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I've seen this mentioned in a few places:

    Quote Originally Posted by Wikipedia
    In order to maintain backwards compatibility sites can opt-into IE7-like handling of content by inserting a specially created meta element into the web page that triggers the "Compatibility mode" in the browser, using:

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    A newer version of the browser than the page was coded for would emulate the behavior of the older version, so that the assumptions the page made about the browser's behavior holds true.
    May be worth a try.

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean, replace my "IE=7" with "IE=EmulateIE7"? Since I have a standards ("super-standards") doctype, these should have the same effect.

    Any thoughts for how I can get IE9 to render in IE9 mode (but IE8 in IE7 mode), or on how to hide the meta tag from validators and other browsers?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by CRGreathouse View Post
    You mean, replace my "IE=7" with "IE=EmulateIE7"?
    Yes. That seems to be the deal.

    Any thoughts for how I can get IE9 to render in IE9 mode (but IE8 in IE7 mode), or on how to hide the meta tag from validators and other browsers?
    I'm not sure, but you don't have to worry about that for a while. You also seem very confident that IE9 will be any better than IE8. (Hope rises eternal, as they say!)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know if this helps but IE8 prints the checkboxes if you set the attribute with js when clicked. (haven't tested radio buttons though)

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function toggle(el) {
        if ( el.getAttribute('checked') != 'checked' ) {
            el.setAttribute('checked','checked');
        }
        else {
            el.removeAttribute("checked");
        }
    }
    </script>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <div>
            <input name="test" type="checkbox" id="test" onclick="toggle(this)"   />
            <label for="test">Checkbox</label>
        </div>
    </form>
    </body>
    </html>
    You could make the code unobtrusive of course and just for ie8 with conditional comments and that will allow you to stay in real IE8 mode which is always best.

  6. #6
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul:

    I love that fix and it works great but apparently it doesn't work in 6 or 7, any suggestions on how to deal with them?
    Trust me, if I didn't have to, I wouldn't support them.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have native IE6 and 7 to test but as far as I know ie6 and 7 don't have this bug anyway. IEtester shows ie6 and 7 printing the check box ok but ie8 in ietester does not print them unless the js is added. I would deduce from that the Ietesters were working correctly.

    Perhaps someone with native installations of ie6 and 7 can double check.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •