<div id="nav"> <nav id="navigation"> <ul class="cf"> <li><a class="line" href="#home"><img src="../img/01_home.svg" alt="ホーム"/></a></li> <li><a class="line" href="#works"><img src="../img/02_works.svg" alt="ワークス"/></a></li> <li><a class="line" href="#news"><img src="../img/03_news.svg" alt="ニュース"/></a></li> <li><a class="line" href="#profile"><img src="../img/04_profile.svg" alt="プロフィール"/></a></li> <li><a class="line" href="#contact"><img src="../img/05_contact.svg" alt="コンタクト"/></a></li> <li class="space"><div class="arrow_nav"></div> <a class="line" href="../ichi/index.html"><img class="nav_a" src="../img/toichi_03.svg" alt="市へ"/></a></li> </ul> </nav> </div>
#home #nav { width: 280px; margin: 0; position: fixed; top: 50%; left: 20px; } #home #nav nav { width: 70%; border-left: 5px solid #FFFFFF; padding: 0 0 0 15px; } #home #nav nav .cf li a img { height: 23px; } #nav nav .cf li { margin: 0 0 10px 0; } /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーここからナビにアンダーライン*/ a.line { position: relative; display: inline-block; padding: .4em; text-decoration: none; } a.line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: white; -webkit-transition: all .3s ease; transition: all .3s ease; } a.line:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーここまでナビにアンダーライン*/
クローム、サファリ、ファイヤーフォックスなどのブラウザでは問題なく表示されて、マウスホバーをした際にナビに下線が引かれるという動作も問題なく作動しています。
ですが、IEで見た際に、上記に記載したグローバルナビの部分のみレイアウトが崩れてしまっています。
IEで見ながら、スマホサイズ、タブレットサイズとブラウザのサイズを変更したところ、レイアウトが崩れているのはPCのブラウザサイズのみでした。ブレイクポイントは960pxで設定しています。
いろいろ調べてみたところ、こちらの記述
<meta http-equiv="x-ua-compatible" content="IE=edge">
をhead内に記載すれば問題は解決されるはずと出ていたんですが、記述してもレイアウトは崩れたままでした。
記述している位置はhead内の<meta charset="UTF-8">の下です。
IEで再確認するさいもキャッシュを削除してIEを閉じてから再度見たんですがダメでした。
IEの方で、検証からどこの要素が悪さしているのか調べたところ、heightの記述を消すとレイアウトが戻るようでした。
ですが、heightを消してしまうと、その他のブラウザでの表示が崩れてしまいます。
なぜ、スマホ、タブレットサイズではheightが問題ないのにPCサイズの時のみIEでレイアウトが崩れてしまうのかご教授ください。
ご回答どうかよろしくお願い致します。
追記ーーーー
使用したIEのバージョンは11です。
回答1件
あなたの回答
tips
プレビュー