0

Web サイトの設計にしばらく費やした後、少なくとも IE9 以下で表示できるようにする必要があると判断しました。以下のウェブサイトの例に従いました。

https://github.com/aFarkas/html5shiv

しかし、役に立たない。

以下は、サイトのページの 1 つが最新のブラウザーでどのように見えるかです: http://gyazo.com/10a74b651a216d76bb677d335fa1551d

IE9 以下での表示は次のとおりです 。

奇妙なことに、ホームページは問題なく表示されます。それは他のすべてのものです。

このコードをすべての HTML ページの先頭に実装しました。

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

html5shiv.js は、プロジェクト ディレクトリの「js」というフォルダーにあります。

そして、この CSS コードを私のスタイルシートに追加しました:

/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

これを行っても、私が盲目でなければ正しいと信じていますが、IE9 以下ではこのサイトがうまく表示されません。

どんな提案でも大歓迎です。

ありがとうございました。

4

1 に答える 1

0

チャーリー、あなたはすでにこれを理解していると思いますが、そうでない場合は、これらのことを試してみます...

まず、CSSについて：

/*HTML5*/
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block; 
}

↑ これは、他の CSS の前に含める必要があります。通常、これらのスタイルは既に追加されているため、これを行う必要はありませんHTML5shivが、一部の古いブラウザーや JavaScript が無効になっているブラウザーでは、これらのスタイルを追加できます。私の意見ではnormalize.css、<head>事前に含める方が簡単です。

また、HTML5shivヘッドに (できれば最後に) が追加されていることを確認してください。ページの読み込み後にフッターに読み込まれると、説明したような問題が発生する可能性があります。

コードは次のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title><meta name="description" content="">
    <!-- CSS Reset -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet">
    <!-- Your site CSS (Optional ) -->
    <link rel="stylesheet" href="css/main.css">
    <!-- HTML5 shim for support of HTML5 elements (added at end of head) -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>

   You content here ....


  <!-- If you use javascript  -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>

html5shiv には既知の問題がいくつかあり、github ページで見つけることができます。それでも問題がある場合は、ここで報告してください。また、スクリプトの最新バージョンを使用していることを確認してください。

于 2016-01-07T17:29:26.470 に答える