0

我在 IE10 应用我为 HTML5 元素指定的 CSS 样式时遇到问题（以及他们的孩子在使用选择器中的 HTML5 元素标签名称定位孩子时），所以我把它分解成一个更简单的例子并放在一起简单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 在这里跳闸？它可能与服务器有关吗？这没有多大意义，但这是一个奇怪的问题。

当然，任何修复肯定会受到赞赏。

4

2 回答 2

3

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

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

你也可以在你的服务器上设置这个：

阿帕奇：

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
</IfModule>
于 2013-06-26T17:48:09.280 回答
1

您的 Web 服务器将“X-UA-Compatible”标头设置为“IE=8”，这会强制 IE 进入 IE8 文档模式。您需要删除它或将其设置为“边缘”。如果您无权访问服务器设置，您可以尝试将modernizr添加到您的页面，这应该允许您在旧版IE 中设置HTML5 元素的样式。

于 2013-06-26T17:56:17.890 回答