1

IE は、禁煙したばかりの喫煙者を再び喫煙させる方法しか知りません!! この応答性の高いナビゲーション メニュー (および私が開発した別の Web サイト) を IE8 で応答するように完成させようとしています (www.testing123.co.za/test1.htm で NAV がどのように見えるかわかりません)

ブラウザ ウィンドウのサイズを変更すると、NAV がメディア クエリを無視しているか、IE8 がこの設計に関連するフロートを気に入らないようです。後者だと思われます。

いくつかの調査を行ったところ、メディア クエリを適用するには、これをページに含める必要があると聞きましたが、js ファイルを含めるときにまだうまくいきません。ここでおそらく何が間違っていたのかわかりませんか？私はjsファイルを次のように含めました：

<script src="css3-mediaqueries.js"></script>

とにかく、IE 8 Float の問題を修正するために何をしなければならないかを明確にしていただければ幸いです (これが問題であると仮定します)。

あなたの助けに感謝します、ありがとう

CSS は次のようになります。

nav {
width: 90%;
margin: 0px auto;   
}

nav ul {
list-style: none;
overflow: hidden;

}

nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 100 24px/1.4 TrumpGothicWestRegular;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
min-height:80px;
padding-top:60px;
}
nav li a img { padding-bottom:5px; display:block; margin: 0px auto; }

/*SMALL*/
nav small {
color: #aaa;    
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;

}

nav li a:hover {
background: #222;
}

nav li:last-child a {
border: none;
}

1100px 未満のビューポート (small-device1100.css):

nav li a {
    font: 100 21px/1.4 TrumpGothicWestRegular;
    min-height:inherit;
    padding: 10px;
}

nav small {
    font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
}
nav li a img { display:none; }

825px 未満のビューポート (small-device825.css):

nav li a {
    width: 33.333333333333333333333333333333%;
    border-bottom: 1px solid #fff;
    font: 100 24px/1.4 TrumpGothicWestRegular;

}

nav li:last-child a, nav li:nth-child(3) a {
    border-right: none;
}

nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
    border-bottom: none;
}

350px 未満のビューポート (small-device350.css):

nav li a {
    width: 50%;
    font: 400 21px/1.4 TrumpGothicWestRegular;
    padding-top: 12px;
    padding-bottom: 12px;
}

nav li:nth-child(even) a {
    border-right: none;
}

    nav li:nth-child(3) a {
    border-right: 1px solid #fff;
}


nav li:nth-child(4) a, nav li:nth-child(5) a {
    border-bottom: 1px solid #fff;
}
4

0 に答える 0