ブラウザによる表示の違いを学ぶ～ドリル式ホームページの作り方

ブラウザによる表示の違いを学ぶ

ul#a3のスタイル

ul#a3は、サイドメニューのリスト項目で、リストマークを”なし”したら、IEのバグのために、一度”ul#a3 li”にdisplay:inline、”でインライン要素にした後、再度ul#a3 li a”にdisplay:blockを指定して戻す作業をしますね。

前項のp.a4と共通のスタイルは、”ul#a3 li,p.a4”のように、カンマで区切って同スタイルを適用します。

あとは、カーソルをメニューリストに当てたときに、背景色が変わるように、擬似クラスを設定します。

ul#a3 {
list-style-type:none;
}
ul#a3 li {
display:inline;
}
ul#a3 li a {
line-height:24px;
border:solid 1px #444;
border-left:solid 10px #444;
border-top:0;
text-decoration:none;
}
ul#a3 li a,p.a4 {
text-align:center;
display:block;
width:150px;
margin-left:20px;
}
ul#a3 li a:link {
background:#ccc;
color:#222;
}
ul#a3 li a:visited {
background:#ccc;
color:#222;
}
ul#a3 li a:hover {
background:#444;
color:#fff;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

表示バグの確認と修正

IEをお使いの方は、「表示バグ？別に普通だけど」とお思いでしょうが、Firefoxを使っている人は、リスト項目メニューがはみ出ていると思います。

li aに対して、width（height,line-height含む）を指定すると、IEで表示したときよりもFirefoxで表示したときのほうが、幅が伸びるのではみ出ているように見えます。

これを直すには、li aでなく、ulにwidthを指定、line-height:24pxの指定を削除して代わりに上下にpaddingを指定し、li aにはdisplay:blockによって親ボックスの横いっぱいまで広がるようにすることです。

また、このように修正すると、IE6で表示した場合のみ、マウス反応範囲が広がらないバグが起こるので、li aにposition:relativeを指定します。

ul#a3 {
list-style-type:none;
width:171px;
}
ul#a3 li {
display:inline;
}
ul#a3 li a {
padding:3px 0;
border:solid 1px #444;
border-left:solid 10px #444;
border-top:0;
text-decoration:none;
position:relative;
display:block;
}
ul#a3 li a,p.a4 {
text-align:center;
margin-left:20px;
}
ul#a3 li a:link {
background:#ccc;
color:#222;
}
ul#a3 li a:visited {
background:#ccc;
color:#222;
}
ul#a3 li a:hover {
background:#444;
color:#fff;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）