1

ul li 構造があり、CSSのみを使用してIE 6でもサポートされている最後の li 境界線を削除したいとします (私のプロジェクトでは css のみの使用が必須です)。

<ul>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
</ul>'

IE6でも機能するような出力が欲しい... ここに画像の説明を入力

4

4 に答える 4

1

IE6 のサポートは必須であるため、Javascript を使用したり、クラスを追加したりしたくない場合 (推奨される方法) は、少し手間がかかります。

どのような外観にするかは明確ではありませんが、弾丸を保持する方法を次に示します。これは、境界線が定義されていて、非表示にすることを前提としています。およびoverflow: hiddenで設定できます。これはIE6で問題なく動作します。<ul>margin-bottom: -1px<li>

デモ： jsフィドル

出力：

出力

CSS:

li {
    border: 1px solid black;
    margin-bottom: -1px;
}

ul {
    overflow: hidden;
}
​​

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>

下の境界線を定義しないだけの別の方法を次に示します。

デモ： jsフィドル

CSS:

li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>
于 2012-12-02T08:13:43.107 に答える
0

解決策は次のとおりです（IE6と同等のIE9のクァークズモードでテストしましたが、結果を教えてください。うまくいくはずです）：

<html>
<head>
  <style>
    ul li{
        border:1px solid red;
    }
    ul li.lastchild{
        border-bottom: 0px; // Or use "border: 0px;" if you completely 
                            // want to remove the border
    }
  </style>
</head>
<body>
    <ul>
        <li>HI</li>
        <li>HI</li>
        <li>HI</li>
        <li class="lastchild">HI</li>
    </ul>
</body>
</html>
于 2012-12-02T08:51:14.867 に答える
0

last-selectorクラスを最後のliに追加することでこれを行うことができます.+

そして、純粋なCSSによるものではないかもしれないが、それが役立つと思う他のオプションは、jQueryがサポートしているため、jQueryを使用できるjQueryによるものです。last-child

試す

$(function(){
   $("ul li:last-child").css("border","none")
})

ほぼすべてのブラウザをサポートします

また、特別な要件がある場合を除いて、ie6 を検討することもお勧めできません。むしろ、Facebook や多くの大きな Web サイトは ie6 チェックを考慮していませんブラウザ統計 ie6 は.5%を保持していないので、ie6 について考えないことをお勧めします

ここに画像の説明を入力

于 2012-12-02T08:10:16.103 に答える
-2

長い研究の結果、CSSにはIE6でも機能する最後のli境界線を削除する単一のメソッドがないという結果が得られました......したがって、最後のli要素にクラスを追加するか、jqueryを使用して最後のli境界線を削除します......。

結果：-CSS uのみを使用しても、この目標を達成することはできません.........。

于 2012-12-02T17:40:18.080 に答える