奇怪的 IE8 html5shiv 行为答案

【问题标题】：Odd IE8 html5shiv behavior奇怪的 IE8 html5shiv 行为
【发布时间】：2013-09-26 03:53:42
【问题描述】：

考虑以下...

<!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> 内容容器中时，会出现轻微的尴尬闪烁。没什么大不了的，但我想让眼睛看起来更轻松，所以我在main 样式定义中添加了display:none;，并在加载内容后添加了show() 或fadeIn() 以防止闪烁。工作...除了在 IE8 中。就好像<main> 失去了由 shiv 定义的 display 并默认为 inline。

我尝试过的事情

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

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

【问题讨论】：

将document.createElement("main") 添加到您的代码中
Shiv 有时在它不是本地的时候似乎不起作用。在本地设置这些东西并将其放在 jquery 库之后。当涉及到 css3 选择器selectivizr.com 时，这是处理 IE8 的额外内容
@KevinB 这不是html5shiv.js 为您做的吗？在添加任何 js 或 css 之前，它包含在头部中。
添加了本地版本的 shiv 并将选择器库添加到头部并且没有 dice :(
我在 shiv 中看不到它正在这样做的任何地方，尽管我当然正在查看一个难以阅读的缩小版本。

标签： jquery css html internet-explorer-8

【解决方案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

【讨论】：

非常好！那行得通，谢谢。那个 jQuery yoda 必须每天都躺下……真是个好人！大声笑
err...我不知道...我会问...可能会让事情变得不舒服，通常我只在他脾气暴躁时才提起（例如'dude，你需要得到躺下'）或当我脾气暴躁时（例如'去......呃......躺下'）