2

誰かがこれに対する解決策を持っているのだろうか。6 列 x 2 行の画像のグリッドが必要です。現時点では問題なく動作します: http://oaeyewear.4pixels.co.uk/brands.html と私は使用しています:

.gallery {
   list-style-type: none;
}
.gallery li {
    float: left;
    height: 130px;
    width: 130px;
    margin-bottom: 26px;
    margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
    margin-right: 0px;
}

しかし、IE8 が nth-of-type セレクターを認識しないことはわかっています。の方法はありますか

  1. IE8 を一緒に遊ばせます。Selectivizr は jQuery でこれを行うことはなく、別のライブラリを導入したくありません
  2. IE8 のためだけに他の条件付き CSS を使用する
  3. ジャバスクリプト？

サイトは Foundation Framework に基づいているため、理想的には、ソリューションは応答性に優れている必要があります。現時点では、サイズが 2 列に縮小され<li>、メディア クエリを使用して 300px で動作するように変更するだけでうまく機能します。

4

2 に答える 2

1

この場合、負のマージン アプローチを使用します。

    .gallery {
       list-style-type: none;
       margin-left: -26px;
    }
    .gallery li {
        float: left;
        height: 130px;
        width: 130px;
        margin-bottom: 26px;
        margin-left: 26px;
    }
于 2013-02-11T20:24:59.220 に答える
0

ie7.js |を使用してみることができます。ie8.js | Selectivizrの代わりにie9.js。

nth-of-typeこれは、他のライブラリを必要とせずに、IE の追加をサポートします。

反対に、それはまた、IE に他の多くの機能と修正を実装します。他のポリフィルを使用している場合は、競合していないことを確認する必要があります。でも試してみる価値はあります。

于 2013-02-11T20:37:01.787 に答える