KYOKUTYO NO BLOG.

なぜかIEでliの「・」が表示できない。リストのポチ。
結論から言うと、float指定してあるliに対しては「・」が表示されないみたい。

li {
  float:none;
}

してあげればおk。デフォルトではこうなってるから、いつのまにかfloatが指定されちゃってる状況ってあんまりなさそうだけど。横に箱を並べてそれぞれの箱の中にリストを表示するもの(↓テーブルで再現)、今回コレでやってしまった。

こんなHTML書いて、

<ul>
  <li>
    <ul>
      <li>リスト1の1</li>
      <li>リスト1の2</li>
      <li>リスト1の3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>リスト2の1</li>
      <li>リスト2の2</li>
      <li>リスト2の3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>リスト3の1</li>
      <li>リスト3の2</li>
      <li>リスト3の3</li>
    </ul>
  </li>
</ul>

CSSにはこんな風にlist-style-type指定してがんばって「・」を表示させようとするが、IEだと表示されない。

li {
  float:left;
  width:200px;
  list-style-type:none;
}

li li {
  list-style-type:disc;
}

li の孫の li にも float:left; が効いちゃってるので float:none; を足してあげる。すると表示された。

li {
  float:left;
  width:200px;
  list-style-type:none;
}

li li {
  list-style-type:disc;
  float:none;
}

今日はまったポイント。badkground-positionをキーワード(left,center,right,top,center,bottom)で指定すると変になるのかな。
background-repeat:no-repeat;と指定してても、background-position:left top;とやると表示が繰り返されたり、表示位置が変だったりするみたい。
background-position:0px 0px;などとpxで指定するのが吉。(0の場合はpxいらないかな)
枠外に背景が表示されてる場合にはoverflow:hidden;がけっこう役に立った。

/* [1] for ie6 */
div#hoge {
color:#f00;
}

/* [2] for fx and safari and opera and... */
html[xmlns] div#hoge {
color:#0f0;
}

/* [3] for ie7 */
*:first-child+html div#hoge {
color:#00f;
}

[2]を効かすにはhtmlタグに要xmlns属性。