- ベストアンサー
半角文字を使用してリスト表示をするとレイアウトが崩れてしまう
-------------------------------- //htmlコード <div id="hoge"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ul> </div> -------------------------------- //cssコード #hoge ul { margin: 0px; padding: 0px; list-style-type: none; width: 500px; } #hoge li { width: 33%; float: left; } --------------------------------- 上記コードで出力をすると以下のように出力されます。 あああ いいい ううう えええ おおお しかし、例えばここで <li>いいい</li> に半角文字を使用して <li>いいいi</li> の様に変更すると あああ いいいi ううう えええ おおお とレイアウトが崩れて表示されてしまいます。 Firefoxでは問題なく表示されますが、IEでこのような現象がおきてしまいます。 これはどういった原因が考えられるのでしょうか。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ＩＥは不具合が多数あることから、そういったミスをブラウザがよみとるのでしょう。 ---css--------------------------------------- #hoge ul { margin: 0px; padding: 0px; list-style-type: none; width: 500px; } #hoge li { width: 33%; float: left; height: 23px; } ---html--------------------------------------- <body> <div id="hoge"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ul> </div> </body> このように指定してみてはどうでしょうか。 heightを加えることで文字全体の高さを指定できます。 今は23pxにしていますがお好みの高さに変更していただいておｋです。
その他の回答 (1)
- kuzumiHK
- ベストアンサー率72% (132/183)
line-heightを設定すると直りそうです。
お礼
回答ありがとうございました。 <li>にline-heightプロパティを設定したところ、問題を解消することができました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
詳しい回答ありがとうございました。 heightプロパティで問題を解消することができました。 また、先回答者のline-heightプロパティでも可能でした。 シェアトップのIEにバグが多くあるのは皮肉な話ですよね。 ページを作成する際、IEを考慮して作るのもなかなか面倒ですしはやく標準化してほしいですね。