※ ChatGPTを利用し、要約された質問です（原文：liタグで先頭のみボーダーを消す方法）
liタグで先頭のみボーダーを消す方法
このQ&Aのポイント
liタグの先頭で一瞬ボーダーが見えてしまう問題の解決方法を教えてください。
yuga.jsを使用して最初の要素にclass="firstChild"、最後の要素にclass="lastChild"を付加することで、問題を解決することができます。
liの数をCMS上で動的に変化させることも可能です。
liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。
その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。
なお、下記が今の所考えている条件となります。
1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、
最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。
2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>
<title>title</title>
<style type="text/css">
<!--
body {
margin-top:10px;
}
ul li.firstChild {
border-top:0;
}
li {
border-top:1px solid;
}
-->
</style>
</head>
<body>
<ul>
<li>hoge1</li>
<li>hoge2</li>
<li>hoge3</li>
</ul>
<div><img src="Sunset.jpg" alt="" width="800" height="600" /></div>
<div><img src="Winter.jpg" alt="" width="800" height="600" /></div>
</body>
</html>
以上、よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 ご教示いただいたソースを試したところ、現象が出なくなりました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <style type="text/css"> <!-- body { margin-top:10px; } ul li:first-child { border-top: none; } /* first-child for IE */ ul li.first-child { border-top: none; } ul li { behavior: expression( this.className += ( ! this.previousSibling ) ? ' first-child' : null, this.style.behavior = 'none' ) ; } li { border-top:1px solid; } --> </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> このたびはどうもありがとうございました。 以上、よろしくお願いします。