0

HTML5 要素 (およびセレクターで HTML5 要素タグ名を使用して子をターゲットにすると、その子) に指定した CSS スタイルを適用する IE10 で問題が発生したため、より単純な例に分解して、単純な例をまとめました。問題を示す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 に答える