first-childあるいはlast-childを使用しないでリストの罫線を消す方法

例えば、以下のようなデザインにしたいとき、liにborder-bottomを指定して、最後のliだけborder-bottomをなしにしなければなりません。

特定のclassを使用したくない場合、first-childあるいはlast-childセレクタを使用すると簡単に実現できるのですが、IE6ではそれらが実装されていないため使用することが出来ません。

｢over-flow:hidden」とネガティブマージン「margin-bottom:-1px」、それとIE6のバグを回避するための「zoom:1」を駆使することでIE6でも無駄にclassを振らずに最後のliのborderを消すことが出来ます。

(X)HTMLコード

<div class="memo">
<h2>メモ</h2>
<ul>
<li>abcdefghijklmn</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>あいうえこかきくけこさしすせそ</li>
<li>abcdefghijklmn</li>
</ul>
</div>

CSSコード

div.memo {
   border:1px solid #ddd;
}

div.memo h2 {
   margin:10px;
   font-size:160%;
}

div.memo ul {
   overflow:hidden;
   margin:10px 10px 0 10px;
   padding:0;
   list-style-position:inside;
   zoom:1;
}
 
div.memo ul li {
   margin:0;
   padding:10px 0;
   margin-bottom:-1px;
   border-bottom:1px solid #ddd;
}

liにborder-bottomで下線を表示し、margin-bottom:-1px;で下のマージンを1px小さくすると、borderが領域からはみ出ます。ulの領域からはみ出した部分を overflow:hidden;で見えなくしています。こうすることで、最後のliのborder-botomだけ見えなくなります。

同じような考えで、border-topにも適用できます。

IE6では原因はわからないのですが、英数字のみなどのテキストを入れると罫線がおかしくなったりするみたいです。