0

HTML 5 を使用して、ワイドおよびミディアム レイアウトの解像度タグを使用して Web サイトを作成しました。私のウェブサイトをテストしたところ、IE9、chrome、firefox、safari では動作しますが、IE8 以前では動作しないことがわかりました。私が使用した CSS リンクは以下のとおりです。

<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel='stylesheet' media='screen and (max-width: 900px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='wide.css' />

現在、ウェブサイトを開いた時点では、div やスタイル設定がないため、CSS スタイル シートへのリンクに関係があると思われます。HTML 内で div タグを使用しました。

例：

<div id ="container">
    <div id ="header">
        <div id = "logo">
            <img src="images/Logo.jpg" height = "180" width = "300" alt = "Oops!">
        </div>                
        <div id = "small-logo">
            <img src="images/SmallLogo.jpg" alt = "Oops!">
        </div>        
    </div>

私は専門家ではなく、どんな情報でも非常に役に立ちます。

編集：

私は使用してみました：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script >
<script type='text/javascript' src='resolution-test.js'></script>

JavaScript の使用:

function adjustStyle(width) {
  width = parseInt(width);
  if (width < 900) {
    $("#size-stylesheet").attr("href", "medium.css");
  } else {
    $("#size-stylesheet").attr("href", "wide.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

Web ページにはスタイル シートしか表示されていませんか? このコードに問題はありますか?

4

4 に答える 4

3

リンク タグのメディア属性内でCSS3 メディア クエリを使用しています。これらは IE8 以前のバージョンではサポートされていません。これが、スタイルシートが IE8 以前で読み込まれない理由です。

編集

以下のColin Bacon による回答で述べたように、 Respond.jsを使用して物事を機能させることができます。上記のオプションを見落としているように見えるので、ここに追加します。リンクタグの前の head セクションに次の行を追加するだけです (src属性値を、ホストされている Respond.js のコピーへのパスに置き換えます)。

<script src="/path/to/respond.proxy.js"></script>

そして、IE6 から IE8 までは問題なく動作し始めます。これは、問題の最も簡単な修正方法です。

于 2013-05-09T10:30:50.873 に答える
0

CSS3 メディア クエリは、IE8 以前ではサポートされていません。

このサポート マトリックスを確認してください。

http://caniuse.com/css-mediaqueries

于 2013-05-09T10:32:10.520 に答える