CSSを使用したメニューのIEの表示くずれについて
CSSで、ul liを使用して横型と縦型のメニューを作成しています。
FireFox、Safariでは正常に表示されるのですが、VistaのIE8で確認したところ、メニューの表示が崩れてしまい解決出来ずにいます・・・。
※当方Mac環境で、デュアルブートのWindows7のIE8ではなぜか正常に表示されています
ローカルに保存したファイルをIEで参照すると正常に表示出来るのですが、オンラインにアップデートしたところ表示が狂います。
↓アップロードしたものをご確認ください。
http://homepage2.nifty.com/task-eng/medicom/deta …
↓ファイルはこちら
http://firestorage.jp/download/8fc0ba3ce80bc4e25 …
どなたか、問題点を指摘していただけませんでしょうか?
よろしくお願いいたします!
No.2ベストアンサー
- 回答日時:
IEはブロック要素の寸法の取り方にバグがあるため、floatさせる要素の合計幅が、計算した幅より小さいはずなのに、改行されます。
対策としては、各要素の幅を小さくするか、外枠ブロックの大きさを広くするかのいずれの対策をとります。
私は、このようなメニューはリキッドスタイルで行います(表示幅、フローとさせる要素もすべて%幅指定)ので、具体的な数値はご自身でお試しください。
実を言うと、このような形で質問者が特定できる可能性のあるURLの張り方は禁止されているので、質問自体が編集される可能性があります。その場合でも回答が齟齬にならないように一般論としてのお答しかしていません。ご了承ください。
ありがとうございます。
ご指摘の方法では解決出来ず、とあるページで見つけた「a要素に指定するfloat:leftを、li要素に一括指定する」ってのをやってみたら、”階段現象”は解決出来ました。
あとは、背景とピクセル単位で合致させる作業なのですが・・・
やはりWindows7以外のIEでは正常に表示出来ず、もうどうしたら良いのやら・・・
とりあえず、一番の問題点は解決出来ましたので、この質問はクローズします。
ありがとうございました。
No.1
- 回答日時:
HTMLを正しく記述してください。
<ul>要素内には<li>以外は入りません。
<!ELEMENT UL - - (LI)+ -- unordered list -->
<ul>
<li>
<div></div>
</li>
</ul>
なお、ひとつの要素におけるidとnameの値は同じでなければなりません。
ありがとうございます!
ul内にあったdivを取り除いてみたりしたのですが、やはりうまくいきません・・・
また、floatしているのに、横並びにならず、階段状に表示されてしまいます。
調べたところ、display:block;をdisplay:inline;に変えると良いとあったのですが、
それも解決しませんでした・・・。
あまりCSSに詳しくないので、具体的にご教授頂けると幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
その要素がjQueryでremove()済...
-
現行の日本国憲法の古い所を教...
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
HTMLでTextareaを横に2つ並べ...
-
CSS:overflow要素の印刷について
-
初歩的な質問です。<div>のwidt...
-
input type="hidden"で取得した...
-
テキストボックスの中にリンク...
-
smallにtext-allignが効かない
-
imgタグをそのまま使うことは正...
-
ドラッグ&ドロップ(D&D)を制限...
-
質問1.
-
「諸要素」とはどういう意味で...
-
改行ほどは行かないけど、若干...
-
figcaption要素の中にul要素
-
aの中にspan
-
brタグ、pタグやtableタグが非...
-
tdに対してmin-heightの定義、...
-
C言語線形リストの問題です
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報