0

私がやろう としていること HTML5 shiv を使用して、HTML5 要素が IE で動作できるようにしようとしています。私はこれを他の 2 つのインスタンスで問題なく使用しました。

私がやっている こと ヘッダータグを開いた直後に、他のすべてのスクリプトが読み込まれる前に、このスクリプトをヘッダーに含めました。

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

また、これらの HTML5 要素に標準の display: block スタイルを CSS に含めました。

何が起こっているのか これは IE 7 & 8 では機能しません。要素はレンダリングされません。私が読んだことによると、HTML5 Shiv はそのタグに対してかなり厳密である可能性があります。たとえば、私のタグは次のように読み込まれます。

<html lang="en" jQuery19109983433033032547="1">

私の body タグも次のように読み込まれます。

<body class="sitedefault">

私は自分のバージョンの JQuery の読み込みを一貫した状態に保ち、HTML5 Shiv に関連して読んだ他の指示に従いましたが、以前の実装と同じように、まだこの障害にぶつかっています。この時点でどんな助けも信じられないほど高く評価されます!

また、Shiv ファイルをローカルでホストしようとしましたが、うまくいきませんでした。

ソースが IE8 でどのように見えるかを次に示します。

<!DOCTYPE HTML>
<html lang="en" >
<head>
<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/script/respond.min.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/pano-framework.css" />
<!-- Pano-Framework Requirements End //-->

この後にロードするものがたくさんありますが、それは私の . なぜこれが機能しないのか、私は完全に途方に暮れています。

更新 IE がこの問題を説明するセクションの一番上にあるこのスタイルシートを読み込んでいることがわかりました。

article {
    DISPLAY: block
}
aside {
    DISPLAY: block
}
dialog {
    DISPLAY: block
}
figcaption {
    DISPLAY: block
}.....

次のようにロードします。

<style>CSS Stylesheet</style>

何がこれをロードしているのか、なぜ HTML5shiv の上のこの場所にロードしているのかわかりません。何か案は？

4

3 に答える 3

0

だから私はこれを機能させましたが、修正をトリガーするために何を変更したかは完全にはわかりません。私の最終的なコードですが、これは次のとおりです。

<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://staging.new.informationweek.com/styles/pano-framework.css">
<script src="/script/respond.min.js"></script>
<!-- Pano-Framework Requirements End //-->

私が目にする最大の違いは、スタイルシートをタグで引っ張っていることです。

みんなの助けに感謝します！

于 2013-10-10T15:31:29.890 に答える
0

HTML5 Shiv Readmeから:

ページの条件付きコメントとスタイルシートの後に HTML5 シブを含めます。

于 2013-10-09T20:32:08.740 に答える
0

試す

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

また、IE ブラウザ モードが に設定されていないことを確認してくださいQuirks。F12 を押すか、[設定] > [F12 開発者向けオプション] に移動します。

設定Document Mode: Standards

編集

Shiv を使用したシンプルな HTML5 ページ

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <style type="text/css">
body{margin:0 auto;}menu{background-color:gray;text-align:center;margin:0;}header{background-color:silver;text-align:center;margin:0;}article{text-align:center;background-color:#A9A9A9;margin:0;}footer{text-align:center;background-color:silver;margin:0;}section{background-color:#ADD8E6;text-align:center;margin:auto;}    </style>
</head>
<body>
    <menu>&lt;menu&gt;</menu>
    <header>&lt;header&gt;</header>
    <article>&lt;article&gt;</article>
    <section>&lt;section&gt;</section>
    <footer>&lt;footer&gt;</footer>
</body>
</html>

またAllow Blocked Content、メッセージがポップアップする場合は、IE で確認してください。それがshivスクリプトです。

于 2013-10-09T18:28:28.437 に答える