アプリ版：「スタンプのみでお礼する」機能のリリースについて

liタグで先頭のみボーダーを消す方法

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：1件

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-transitio …
<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>

以上、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

一瞬見えるのは、ページを完全に読み込んでから、消してるからかなぁ・・・。



これでも、一瞬見えますか？

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'
) ;
}

参考
http://www.yomotsu.net/lab/css/iefirstchild
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースを試したところ、現象が出なくなりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>

このたびはどうもありがとうございました。

以上、よろしくお願いします。

通報する
お礼日時：2011/02/20 21:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報