【CSS】floatしたリスト(li要素)をIEで表示すると崩れてしまう場合の解決方法

2015.05.21 2019.01.29 HP制作

CSSでリスト（li要素）をfloatした際、Internet Explorerで表示すると階段状に崩れてしまう時があります。

Internet Explorer(IE)

その場合の原因と解決方法について。

floatしたリストが崩れる原因

原因はliタグの中にあるaタグにfloat指定をしているためです。

<ul class="select">
    <li><a href="#">CAFES</a></li>
    <li><a href="#">FOODS</a></li>
    <li><a href="#">GOODS</a></li>
    <li><a href="#">GALLERYS</a></li>
    <li><a href="#">GROUPS</a></li>
    <li><a href="#">HOUSES</a></li>
</ul>
.select a {
 float: left;
 padding: 4px 12px;
 display: block;
 text-align: center;
}</code></pre>

[display:block]を使って横並びのナビゲーションを作る場合、ついaタグにfloat指定したくなりますが、この記述だとIEで正しく表示されない可能性があります。これを回避するためには、aタグではなくliタグにfloat指定するようにします。

.select li {
 float: left;
}
.select a {
 padding: 4px 12px;
 display: block;
 text-align: center;
}

aタグに指定してCSSをスッキリさせたい気持ちはわかりますが、きちんとliタグに指定する習慣をつけましょう！