2008-06-23

リストマーカーの表示位置を揃える

リストマーカーを好きなものに変えたいときは、<li> に下のように背景画像を指定してあげればいい。

li {
  background: url(image-path) left center no-repeat;
}

<li> が1行の時には全然問題ないですが、<li> が2行になったときに2行になったリストの真ん中にリストマーカーが表示されてしまうのがすごくイヤなんです…。
リストマーカーは1行目の先頭についていて欲しい!

で、これを実現するためにはどうしましょ?を解決するために、背景画像の上からの位置を px 単位で決めちゃえばいい。
上から4px がちょうどいい位置だと仮定すると、

li {
  background: url(image-path) left 4px no-repeat;
}

でオッケー!と思いきや、この指定の仕方だと NetScape 7で表示がおかしくなるようで…。
left と指定している部分を0px に変更すればこのバグは回避できるそうです。

px 指定じゃなくて、0% なんかでも大丈夫みたいです。
例えば、

li {
  background: url(image-path) 0% 4px no-repeat;
}

なんていう指定でもバグは出ない。要は、left などの指定と数値の指定を組み合わせると出現するバグのようです。
ネスケ7のシェア自体は大したことないかもしれないけど、この方式で指定してデザインに問題が出ないようならちゃんと指定しておきたいなと思います。