IE10不在JSFiddle之外的HTML5的header / footer / nav / main元素上应用CSS样式。 HTML5怪癖模式触发了吗？

Question

我遇到了IE10应用为HTML5元素（以及使用选择器中的HTML5元素标记名称使用子项定位子项的子项）指定的CSS样式时遇到的问题，因此我将其分解为一个简单的示例，并整理了一个简单的示例JSFiddle示例来演示该问题，但是当我测试JSFiddle时，IE10决定适当地应用样式。 因此，我获取了JSFiddle生成的iframe的确切源代码，并将其复制到服务器上托管的文件中，可惜它再次无法正确应用样式。

JSFiddle的来源：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='/js/lib/dummy.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    header, nav, main, footer {
        display: block;
        background: gray;
        padding: 10px;
        margin: 1px;
    }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    nav ul li {
        display: inline-block;
    }
    nav ul li a {
        color: white;
        text-decoration: none;
        padding: 10px;
    }
  </style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
}//]]>  
</script>
</head>
<body>
  <header>
    <img src="http://placehold.it/300x80&text=Logo" />
</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<main>    
    <p>This is filler content inside the <code>&lt;main&gt;</code> element. The <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code> and <code>&lt;footer&gt;</code> should each have a gray background and be displayed as a block.</p>
</main>
<footer>
    <p>Copyright &copy; 2013, All Rights Reserved</p>
</footer>
</body>
</html>

IE10有何处理？ 它不可能是代码，因为它可以在iframe中正常工作，还是iframe与其父页面得到了相同的待遇？

是什么原因导致IE10在这里跳闸？ 可能与服务器相关吗？ 那没有多大意义，但这是一个奇怪的问题。

自然，任何修复都将不胜感激。

Answer 1

根据开发人员工具，它在服务器上以IE8模式运行。 尝试将以下代码添加到您的<head>标记中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

您也可以在服务器上进行设置：

阿帕奇：

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
</IfModule>

Answer 2

您的Web服务器的“ X-UA兼容”标头设置为“ IE = 8”，这将IE强制转换为IE8文档模式。 您需要删除它或将其设置为“ edge”。 如果您无权访问服务器设置，则可以尝试在页面上添加modernizr ，这应允许您在较旧的IE中设置HTML5元素的样式。

IE10不在JSFiddle之外的HTML5的header / footer / nav / main元素上应用CSS样式。 HTML5怪癖模式触发了吗？

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-06-26 17:48:09

解决方案2
1 2013-06-26 17:56:17

IE10不在JSFiddle之外的HTML5的header / footer / nav / main元素上应用CSS样式。 HTML5怪癖模式触发了吗？

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-06-26 17:48:09

解决方案2 1 2013-06-26 17:56:17

解决方案1
3 已采纳 2013-06-26 17:48:09

解决方案2
1 2013-06-26 17:56:17