Working around a serious IE8 bug

**CRGreathouse** · Mar 5, 2010 14:51

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?

**ralph.m** · Mar 5, 2010 16:58

I've seen this mentioned in a few places:

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.

**CRGreathouse** · Mar 6, 2010 01:03

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?

**ralph.m** · Mar 6, 2010 01:15

Originally Posted by CRGreathouse

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!)

**Paul O'B** · Mar 6, 2010 08:51

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.

**stephmoreland** · Jan 31, 2011 15:49

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

**Paul O'B** · Jan 31, 2011 17:19

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.

User Tag List

Thread: Working around a serious IE8 bug

Thread Tools

Display

Hybrid View

Working around a serious IE8 bug

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions