[ CSS ] IE6 でリストの背景画像が表示されないよ

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

MultipleIEs の Internet Explorer 6.0 でリストの背景画像が表示されなくてハマったのでメモ。

問題の状況

とりあえず、問題の起きる状況をまとめてみます。

Internet Explorer 6.0 のスナップショット

こんな感じでリストマーク ( 背景画像 ) が表示されない。

HTML のソース

<div>
  <ul>
    <li><a href="#">ああああああああああ</a></li>
  </ul>
</div>

CSS のソース

#test {
    position: relative;
    width: 150px;
    height: 150px;
}
#test ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#test ul li {
    background: url(list.gif) no-repeat 0 1px;
    padding-left: 16px;
}

サンプルファイル

https://codepen.io/darucub/pen/MYyYdwp

とりあえず回避法

• #test ul li に position: relative; を加える。

• #test の position: relative; を消したりする。

手探りの回避法なんで CSS の達人たちに怒られそうだ。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。