У меня ошибка в IE8, но работает в Firefox, Chrome и Safari. Вот мой HTML код
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
Вы можете увидеть код в действии здесь - http://evermight.com/jquerybug/index.html
В IE8, почему, когда я нажимаю кнопку "нажать", h2 с черным фоном превращается в белый фон вместо того, чтобы оставаться черным фоном? Когда я удаляю пустое пространство между html(' и <header> обработчика события нажатия кнопки, черный фон сохраняется, как и ожидалось.
Почему пустое пространство влияет на внешний вид тега заголовка CSS в IE8?