0

これは私のdivコンテナです:

#randomid { 
margin-right:40px;
margin-bottom:35px; 
float:left;
}

内部には 12 個の要素 (2 行) があります。そして、右端のものから右端のマージンを削除する必要があります（6つごと）。

だから私はこの疑似セレクターを手に入れました：

#randomid:nth-child(6n+6) {
    margin-right: 0; 
}

JavaScriptを使用せずにIE 8でこれを機能させるにはどうすればよいですか?

4

3 に答える 3

2

このような複雑な CSS セレクターを使用する代わりに、古いブラウザーではサポートされていないという欠点があるため、検討すべき回避策があります。セレクターを使用せずに、望ましい結果であると私が信じるものを達成する方法の小さな例をまとめました。

以下の例では、各行に 6 つの要素があり、各要素を区切るマージンがありますが、各行の最初の要素の前または最後の要素の後にマージンはありません。

マークアップ:

<div class="foo">
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="clear"></div>
</div>

CSS:

.foo {
    background-color: #ccc;
    width: 180px;
    margin: 0 -10px;
}

.bar {
    background-color: #888;
    float: left;
    margin-left: 10px;
    width: 20px;
}

.clear {
    clear: both;
}

実際の例

それはあなたが望むものではないかもしれませんが、少なくともあなたが適応し、さらに発展するための出発点として機能します.

アップデート：

私の例で使用されている余分な要素の代わりに使用できるフロートをクリアするより良い方法があります (単純にするために使用しました)。興味がある場合は、これに関するSO の質問があります。

于 2013-02-12T16:24:49.110 に答える
2

selectivizr を使用できます。Internet Explorer 6-8 で CSS3 疑似クラスと属性セレクターをエミュレートする JavaScript ユーティリティです。ページにスクリプトを含めるだけで、selectivizr が残りの作業を行います。

http://selectivizr.com/

交互に

最初の子と「+」を使用して、n 番目の子をエミュレートできます。例:

tr>td:first-child + td + td + td + td + td + td + td + td{background-color:red}

nth-child(9) と同じように 9 番目の列を選択し、IE で動作します

于 2013-02-12T16:00:57.143 に答える
0

実際には、これを完全にクロス ブラウザーで機能させるための優れたトリックがあります。

最後の要素のマージンが右にあるにもかかわらず、すべての子要素が内側に収まるように、コンテナを含む幅を指定します。たとえば、

#randomidContainer { 
    width: 840px;
}

次に、そのコンテナーを別のコンテナーにラップするだけです。これを使用して、たとえば次のようなトリックを実行します。

#randomidOuterContainer { 
    width: 800px;
    border: 1px solid #000;
    overfliw: hidden;
}

これにより、（一種の）魔法のように、ピクセル完璧なレイアウトに合わない可能性のある余分な余白が右側にあるにもかかわらず、内側のフロート要素が 1 行に収まるようになります。

于 2013-12-03T14:49:11.200 に答える