0

考虑以下...

<!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>是我的包装器，其中包含 a<nav>和<footer>a<div>通过 ajax 调用注入内容。当网站首次加载登陆页面内容并将其注入到空的<div>内容容器中时，会出现轻微的尴尬闪烁。没什么大不了的，但我想让眼睛看起来更轻松，所以我display:none;在main样式定义中添加了一个，并在内容加载后添加了一个show()或fadeIn()以防止闪烁。工作...除了在 IE8 中。它好像<main>失去了display由 shiv 定义的并默认为inline.

我尝试过的事情

我已经用它替换了<main>标签，<div id="main">这很好用。但我正在尝试采用 HTML5 并希望使用该<main>标签。

我知道这是次要的，当我不明白为什么时我会感到沮丧。

4

1 回答 1

1

不能完全相信这一点......与我一起工作的另一个开发人员是 jQuery yoda....

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

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

或淡化：

var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested
于 2013-09-25T19:53:42.787 回答