overflowでリストの最初だけborderを消すってヤツ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

CSS HappyLifeさんが、overflowの便利な使い方(とっても使えるoverflowプロパティ。その使い方色々。)を公開してくださっていたので、fmfmと試してみたところ、いきなり02 リストの最初だけborderを消すでサンプル通りの挙動にならずに、つまづいたという話。

どんな風につまづいたかというと、IE6にて下の画像のようになってしまう。

IE TesterのIE6表示

文章で説明すると、liにborder-topを指定しているのに、margin-top:-1pxを指定するとliの下側に(ul?)borderが現れる、そしてliの2番目のborderが2倍になってる。
02 リストの最初だけborderを消すのサンプルをIE6で表示させても、そうならないから、うちの書き方がどこかミスってるんだろうか??

ちなみに意図した表示にならなかったソースはこんな感じ。

[html]
<div class="ov1">
<p>border-top</p>
<ul>
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbb</li>
<li>cccccccccccc</li>
<li>ddddddddd</li>
<li>eeeeeeee</li>
</ul>
</div>
[/html]
[css]
.ov1 ul {
zoom:1;
overflow:hidden;
}

.ov1 li {
border-top:1px solid #f33;
list-style:none;
margin-top:-1px;
}
[/css]

liのborderをbottomに変えてみたら

IE TesterのIE6でも意図した表示にできた。
[css]
.ov2 ul {
zoom:1;
overflow:hidden;
}
.ov2 li {
border-bottom:1px solid #f33;
list-style:none;
margin-bottom:-1px;
}
[/css]

確認用ページ|http://sakurachiro.com/_exercise/html_css/overflow/
ん~何が違うんだろう。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.