Working around a serious IE8 bug

HTML & CSS
1

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

<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

<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<![endif]-->

or even

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

I’ve seen this mentioned in a few places:

May be worth a try. :slight_smile:

3

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

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

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.


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

@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

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.