html - IE8/9でのみグリッド間隔の問題

Question

<dl>最初の要素の幅が他の要素の2倍であるという奇妙な状況に遭遇しましたが、IEでのみです。これにより、このフォトグリッドレイアウトにギャップが表示されます。

例： http： //user45201.vs.easily.co.uk/？page_id = 109

Chrome / FF / IE7では正常に動作しますが、IE8とIE9では間隔がおかしいです。

Answer 1

問題の一部は、フローティングでない親内のフローティング要素にあるようです。親コンテナにフロートを追加したところ、修正されました。幅 33% を使用していて、要素に間隔を適用しようとしているので、画像が次の行にジャンプしないように box-sizing プロパティを追加しました。お役に立てれば。

#gallery-1 {
    float:left;
}
#gallery-1 .gallery-item {
    float: left;
    text-align:center;
    width: 33%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#gallery-1 .gallery-icon{
    padding-left:10px;
    padding-top:10px;
}