リスト表示がうまくいきません　IEの問題なのか？

Question

メニュのナビを下記のHTML及びCSSで表現しています私のパソコンでは問題なく表示しました OS:WinXP Chrome/firefox/IE8 先日友達のパソコンで見るとこのメニューナビが右に長いのです「お問合わせ」の横にもメニューナビの背景色が続いています友人のパソコンは OS:WinVista IE7 他の条件では検証してないのでわかりませんが… OS:WinVista　が問題なのか？ IE7　が問題なのか？例えば問題であれば解決策はあるのでしょうか？アドバイスいただけないでしょうか？ ---------------------------------------------------------- ---------------------------------------------------------- #menu { width: 100%; border-left: 1px solid white; overflow: hidden; } ul.menu_navi{ height: 50px; margin: 0px; position: relative; float: left; left: 50%; color: white; border-bottom: 5px solid black; background-color: red; } ul.menu_navi li{ float: left; position: relative; float: left; right: 50%; border-right: 1px solid white; display: block; } ul.menu_navi li a{ height: 40px; width: 239px; padding: 10px 0px 0px; color: white; border-bottom: 5px solid black; font-size: 18px; font-weight: bold; text-decoration: none; display: block; text-align: center; background-color: red; vertical-align: middle; line-height: 140%; } ul.menu_navi li a.nowthis{ border-bottom: 5px solid white!important; } ul.menu_navi li a:hover{ padding: 10px 0px 0px; border-bottom: 5px solid red; color: red; background-color: white; }

kuzumiHK · Accepted Answer

幅固定中央合わせなら、下記のスタイルでもいけますよ。 liタグは改行などでバグが出やすいので、 aタグをブロックにすることで回避します。また、positionは不安定なのでIE6、7などが対象に残っている間は、使わなくて済むなら使わないほうが無難ですね。

naokita · Answer

IE7ではdisplay: block;で、あり得ないmargin-bottomが出現するので、 HTML側で、全liを一行設定にする。例：

一行の意味がわかりますか？または、IE7ハック *:first-child+html #side li{ float:left;} *:first-child+html #side li{ zoom:1;} その他の対応もありますが、ハックを使うよりも、HTML側で、全liを一行にする方が良いかも画像の場合は、vertical-align

ORUKA1951 · Answer

長々したCSSはくたびれます。簡潔に書きましょう。幅広のディプレイをお使いですか?、私の画面からははみ出る。可能なものはリキッドスタイルで一画面で何をしているかわかるようにまとめないとメンテナンス不能になり、色々な調整ができません。 ★継承されるものは親要素に ★継承されないが共通するものはセレクタをグループ化する。 ※背景が見えたらまずいものには背景色を付けなきゃ良いです。 ▲

名は、構造を示すため(SEO)。HTML5では、そのまま

にできる。 ▲ウィンドウ幅に依存しません、i-phoneでもOKです。とにかくHTMLは文書構造に従ってシンプルに、そうしておくとCSSもシンプルでメンテナンスしやすくなる。このままプルダウンメニューも追加できます。下はサンプル全文です。HTML4.01strictです。CSSを使うときはstrictのほうが良い。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でテスト済み IE5以降でOK,Opera,firefox,safariOK タブは、__に置換してあるので戻すこと。 __ __サンプル __ __ __ __ __ __

サンプル

__

ORUKA1951 · Answer

次に文字が続くことを考えると下記セレクタの宣言を変更したほうが良い
div.nav ul{
list-style:none;
width:95%;
margin:0 auto;
height:50px;/* 変更 */
line-height:50px;
text-align:center;
font-weight:bold;
}
div.nav ul li{
height:100%;/* 変更 */
width:24%;
float:left;
}

ORUKA1951 · Answer

書き漏らしたので・・来客だったので急いで送信してしまった。
可能な限りハックは使わない。プレゼンテーションのためにHTMLを弄ることはしない!!何のためのスタイルシート??
　HTMLを書き直さなければならないとしたらHTMLが間違っている。今回のものはそれはない(正統なHTML)です。

CSSを読まれるとわかりますが、小細工も裏技も一切ありません。単に
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
をそのまま素直に適用しているだけです。それ以外の資料は見てません。

メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/ より引用)

リスト表示がうまくいきません IEの問題なのか？

IE7ではdisplay: block;で、あり得ないmargin-bottomが出現するので、

長々したCSSはくたびれます。

次に文字が続くことを考えると下記セレクタの宣言を変更したほうが良い

書き漏らしたので・・来客だったので急いで送信してしまった。

幅固定中央合わせなら、下記のスタイルでもいけますよ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

リスト表示がうまくいきません　IEの問題なのか？