質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Q&A

解決済

1回答

899閲覧

IEで見た時のレイアウト崩れを直したい。

stowe

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

0グッド

0クリップ

投稿2017/08/09 04:48

編集2017/08/09 05:06
<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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YukiYonekura

2017/08/09 05:00

IEのバージョンを追記ください
stowe

2017/08/09 05:05

IEは11だと思います。追記します。
stowe

2017/08/09 05:15

@media all and (-ms-high-contrast: none){ }←こちらの記述で該当のcssをくくれば良いということでしょうか?
stowe

2017/08/09 05:31

IEのみheight noneにすると、ナビのimg要素が馬鹿でかくなってしまうのです。。。svg画像なのですが・・・。
stowe

2017/08/09 05:34

ちょっとLanHma様のやり方をやってみます。
guest

回答1

0

ベストアンサー

css

1#home #nav nav .cf li a img { 2 height: 23px; 3 width: 23px;//追加。実際の横幅のpxに変更して下さい。 4}

このimgにwidthのスタイルを追加する事で解決しませんか?

投稿2017/08/09 05:10

LanHma

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stowe

2017/08/09 05:17

navのimgそれぞれのwidthが異なっているので、nav imgの全てにクラスをつけて一つずつwidthを指定する感じでしょうか?
LanHma

2017/08/09 05:25 編集

画像がpng、jpgではなくsvgなので、IEの場合はwidthとheight両方指定しないとキレイに表示されない場合があります。 <img src="sample.svg" alt="" width="300" height="200"> クラスを付けずともこのような形で個別で指定する事も出来ます。
stowe

2017/08/09 05:34

なるほど・・・・やってみます!
stowe

2017/08/09 05:37

<img src="sample.svg" alt="" width="300" height="200">の記述はhtmlの方に記載する内容で間違いないでしょうか?今やっているcssだと、スマホ、タブレット、pcで異なったheightをimgにかけています・・・。
stowe

2017/08/09 05:48

すごいです!!指定したら、IEでもきちんと表示ができました!!ありがとうございます!ですが、この記述方法だと、タブレットサイズの方も同じサイズになってしまいますね・・・。
LanHma

2017/08/09 05:54

異なったheightを指定しているなら、 それぞれのimgタグにクラスを振ってあげて、 メディアクエリで分岐するのが良いかも知れないですね。
stowe

2017/08/09 06:21

ありがとうございました。ここからは頑張ります。今後もよろしくお願い致します。
stowe

2017/08/09 06:22

すみません、コメント見ていませんでした。そうですね、少し手間ですが、そうやってクラス振って、分岐したいと思います。本当にありがとうございました。ずっと直らなかったので、本当に嬉しいです。
LanHma

2017/08/09 07:15 編集

個々にクラスをつけるのが手間なら:nth-childを使用して分岐する事も可能です。 //1番目のimgタグ li:nth-child(1) .line img{ width: 100px; height: 100px; } //2番目のimgタグ li:nth-child(2) .line img{ width: 200px; height: 200px; } //3番目のimgタグ li:nth-child(3) .line img{ width: 300px; height: 300px; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問