Question

考虑以下内容......

<!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调用注入内容。当网站首次加载并将着陆页内容注入空的<div>内容持有者时，会有轻微的尴尬闪烁。这并不是什么大不了的事，但我希望眼睛看起来更容易，所以我在display:none;样式定义中添加了main，并在内容加载后添加了show()或fadeIn()防止闪烁。工作......除了IE8。它好像<main>丢失了由shiv定义的display，默认为inline。

我尝试过的事情

我已将<main>标记替换为<div id="main">，这样可以正常使用。但我正在尝试使用HTML5，并希望使用<main>标记。

我知道这是次要的，当我不理解为什么时，我感到很沮丧。

Answer 1

不能完全归功于此......我与之合作的其他开发人员是jQuery yoda ....

jQuery默认情况下会添加“display：inline;”的CSS样式标记元素。因为IE中没有将'main'定义为已知元素（例如div），所以它默认为'inline'。一些解决方案可能是：

$('main').css('display','block');

或淡出：

var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested

奇怪的IE8 html5shiv行为

1 个答案: