3

だから私は、ハンドルバー、チルト、液体テンプレートなどのいくつかの相互依存関係を使用するBonsaiと呼ばれる静的サイトジェネレーターを使用しています。現在、ベストプラクティスに従って、HTML5で構築しています。私はChromeとFirefoxとOperaでフォーマットを広範囲にテストしました。最後のIEの最悪の事態を保存します。

最初に明白な解決策を与える人の前に、私は頭にhtml5shivを含め、cssに設定しました：

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

IE 8と9をサポートしてもらいたいのですが、古いものはあまり気にしません。現在、ヘッダーはまったくレンダリングされません。IE9のコンソールを見ると、何も通過していないことがわかります。オンラインソースからshivファイルをプルしようとしているためだと思ったので、html5shiv.jsファイルをダウンロードしてヘッドにリンクし、次のように呼び出しました。

  <!--[if lte IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->

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

そして、テストと同じように、上記のリンクの9を削除してifステートメントを破ったものはまだありません。ページを更新すると、その上にヘッダーブロックが表示されるようになりました

<!--[if lt IE ]> <![endif]-->

ifステートメントで特定のバージョンではなくIEを検索し、レンダリングしないバージョンを指定した場合、ifステートメントを削除して、ヘッド内のhtml5shiv.jsファイルを呼び出すだけではレンダリングされません。ifステートメントを壊した場合にのみレンダリングされますか？申し訳ありませんが、これがわかりにくい質問である場合、これはHTML5での最初の試みです。何が欠けていますか？

編集：

そうそう、あなたはそのサイトをここで見に行くことができます。申し訳ありませんが、Ian i stackoverflowコメントはhttp：//をレンダリングするので、コメントに表示されませんでした。

私が試してみました

 <!--[if IE ]> <![endif]-->  //all versions of IE
 <!--[if lt IE 9]> <![endif]-->  //all versions of IE before 9
 <!--[if lte IE 9 ]> <![endif]--> // version 9 of IE

どれも機能していません..そして私のHTMLはすべてかなりまっすぐです..それが準拠するかなり前にこれはそれがどのように見えるかです

<header>
  {% include "shared/nav" %}
</header>

上記で参照しているナビゲーションは次のようになります

<nav id="navigation">
  <div id="nav_div_home" class="nav_buttons"><a id="nav_home" class="left_nav" href="/">Home</a></div>
  <div id="nav_div_system" class="nav_buttons"><a id="nav_system" class="left_nav" href="/systems/">Systems</a></div>
  <div id="nav_div_studies" class="nav_buttons"><a id="nav_studies" class="left_nav" href="/studies/">Studies</a></div>
  <img id="nav_logo" src="/images/logo3.png" alt="Mpowered logo">
  <div id="nav_div_approach" class="nav_buttons"><a id="nav_approach" class="right_nav" href="/approach/">Approach</a></div>
  <div id="nav_div_about" class="nav_buttons"><a id="nav_about" class="right_nav" href="/about/">About</a></div>
  <div id="nav_div_contact" class="nav_buttons"><a id="nav_contact" class="right_nav" href="/contact/">Contact</a></div>
</nav>

そして、＃navigationタグで実行するCSSは

#navigation {
 height: 150px;
 padding-top: 60px;
 margin: 0px auto;
 width: 960px;

}

しかし、それがヘッダータグをどのように壊すのかわかりませんか？

4

2 に答える 2

4

上記の私のコメントに加えて、IE9用のhtml5shivは必要ありません。これはご存知のとおりです。

IEは他のブラウザのように問題を修正しようとしないため、他の場所でHTMLの問題が発生する可能性があります。

<!--[if lt IE ]> <![endif]-->動作しない理由は、ltを削除して、単に読み取りを行う必要があるためです。<!--[if IE]> <![endif]-->

JSファイルに関する上記の返信に基づいて、次のことを試してみます。

<!--[if lte IE 9]><script src="js/html5shiv.js"></script> <![endif]-->

と

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

間違っている。http://の前にある必要がありhtml5shivます。

問題のウェブサイトへのリンクが理想的です。

更新 私は今何が悪いのかわかります、あなたはDoctypeを失っています！追加：

<!doctype html>

ファイルの先頭に移動すれば問題ありません。

Doctypeが指定されていない場合、IEは常にQuirksモードに頼ります（これは絶対に必要ありません！）

また、間違っている複数の<head>要素があります。そして、すべてを要素で囲む必要があります<html>。

実際、マークアップには多くの間違いがあり、要素さえありません<body>！

于 2013-02-15T09:39:04.190 に答える
2

実際には、DOMに要素を追加せずに要素を作成するだけで、IE（6でも）が要素を認識できるようになります。それで

<script type="text/javascript">
   document.createElement("'header'");
   document.createElement("'nav'");
   document.createElement("'article'");
   document.createElement("'section'");
   document.createElement("'footer'");
 </script>

あなたの問題を解決します。あなたはそれをに減らすことができます

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

ここにあります：http：//www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html

于 2013-05-22T08:39:02.000 に答える