1

「アダプティブ デザイン」を使用してコーディングした元のページは次のとおりです。モバイル デバイスはサポートされていません: http://opportunityfinance.net/Test/savedateIE8/index.html

下の写真のように、IE 8 では見栄えがします。

IE 8 いい感じ

<meta>これはモバイル デバイス用に最適化したページです。基本的には、モバイル デバイス用のタグなどを追加することを除いて、最初のページとまったく同じです。私がテストしたすべてのブラウザーで見栄えがしますが、IE 7 (私はあまり気にしません) と IE 8 (私が本当に気にかけている) を除きます。多くの人が IE 8 を使用してサイトにアクセスするため、IE 8 をサポートする必要があります! : http://opportunityfinance.net/conference-2013/index.html

以下のIE 8での外観の写真：

モバイル デバイスをサポートするための IE 8 ナイトメア

これが IE 8 で最初の写真とまったく異なって見えるのはなぜですか? 理解できません。私の知る限り、index.cssファイルをロードして、最初のページとまったく同じように適用する必要があります。ここで何が問題なのですか？

このコードに関連している可能性があります:

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

しかし、そのコードを削除すると、IE 9 でもすべてジャッキアップされているように見えます。

編集: IE 8 から IE 9 に変更するコードを編集しないでください。この問題は IE 9 でテストされていることを理解していますがIE 8 Document Mode、開発者ツールで使用しているため、IE 8 と同じです!

4

1 に答える 1

1

わかりました、これが私がこの問題を解決した方法です。IE 9 より前のどのバージョンの IE も、タグ属性media queries内で使用する場合、スタイルシートを添付しないようです。また、IE 8 では、次の行が表示されると、いくつかの奇妙な動作がありました: そして、結局のところ、この行は必要ありません: Google Chrome Frame が利用できず、Edge も利用できなかったため、問題が発生していました。 . そのため、その行を削除したところ、すべて問題ありません。linkmedia<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

興味のある人のために、これをモバイルデバイスとIE 7および8で機能させるために私がしなければならなかった汚いハックを次に示します。

<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->

elseこれらの条件文にステートメントがあればいいのにと思いますが、何でも構いません。これで動作し、index.css ファイルが読み込まれます。神に感謝します。IE 7 と 8 はとにかくスタイルシートを無視し、メディア クエリを使用するため、narrow.cssファイルに条件は必要ありません。

于 2013-04-02T06:25:37.320 に答える