IE9のメモ : CSS

Tweet

Pocket

原因は特定できていないけれどIE9で下記の現象が起こり解決に手間取ったのでメモをしておく。

トップページのfooterのスタイルをhead要素に記載していた。

.

div#footer {
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

トップページ以外のページのfooterは固定幅のwrapperに包含されており下記のようなスタイルを設定していた。スタイルは外部スタイルシートに記載していた。

div#wrapper {
    width: 960px;
}
div#footer {
    clear: both;
    border-top: solid 1px #333;
}

このときトップページのスタイルがサブページでも適用されfooterが画面全体に表示された。ｆooterにwidthを指定する期待通りの表示になった。

div#wrapper {
    width: 960px;
}
div#footer {
    clear: both;
    width: 960px;
    border-top: solid 1px #333;
}