考虑以下...
<!DOCTYPE>
<html>
<head>
<title></title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
main{
width:500px;
height:500px;
margin:0 auto;
border:5px solid red;
display:none;
}
</style>
</head>
<body>
<main>
<h1>Test</h1>
</main>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
//load some external content then on callback...
$('main').show();
});
</script>
</html>
在除 IE8 之外的所有浏览器中都能正常工作(令人震惊)。如果删除 display:none;那么一切都很好，所以我假设这是问题所在。但是为什么？
我想要完成的事情
<main>是我的包装器，其中包含 <nav> , <footer>和一个 <div>通过 ajax 调用注入(inject)内容。当网站首次加载并将着陆页内容注入(inject)空的 <div> 时，会出现轻微的闪烁。内容持有人。没什么大不了的，但我想让眼睛更舒服，所以我加了一个 display:none;到 main样式定义并添加了一个 show()或 fadeIn()一旦内容被加载以防止闪烁。工作...除了在 IE8 中。就好像<main>失去它的 display由 shiv 定义，默认为 inline .
我尝试过的事情
我已经替换了 <main>用 <div id="main"> 标记这很好用。但我正在尝试接受 HTML5 并想使用 <main>标签。
我知道这是次要的，当我不明白原因时，我会感到沮丧。
最佳答案
这不能完全归功于...与我一起工作的另一个开发人员是 jQuery yoda...
默认情况下，jQuery 似乎添加了“display:inline;”的 css 样式标记元素。因为'main'在IE中没有被定义为已知元素(比如div)，它默认为'inline'。一些解决方案可能是:
$('main').css('display','block');
或淡入淡出:
var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested
关于jquery - 奇怪的 IE8 html5shiv 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19013256/