Mottr.am

How to Fix the IE8 Noscript Bug

on

IE8, which is mostly a huge improvement over its predecessors, introduces a new bug.

If you style the noscript tag with a background colour and a border, like so:

noscript {
	background:#ffffe0;
	border:1px solid #ff0000;
	}

Then IE8 will, if JavaScript is switched on, display a funny little box with an off-white background and a red border. It won’t render the contents of the noscript tag, just its background and border.

A screenshot of this site showing the IE8 noscript bug in action

In other words, if you’ve followed best practice by warning users with JavaScript switched off that your site uses it, IE8 will punish you by mucking up the layout for users with JavaScript switched on, the very users who should never, ever see the noscript tag in action. Nice one. (For those of us using HTML5 to make websites, this is especially galling–no version of IE can render HTML5 without a bit of JS, so a warning is absolutely necessary.)

How to fix it? Stick your warning message in a div inside the noscript, and style that instead:

noscript div {
	background:#ffffe0;
	border:1px solid #ff0000;
	}

You could also make the little box disappear by styling noscript with display: inline, and adding a meta tag to force IE8 into compatability view:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

But that would be silly.