0

画像が 100% に設定され、それらの間に 1 ピクセルの境界線があるフローティング画像のグリッドを作成しました。この問題は IE9 でのみ発生するようです... ブラウザのサイズをゆっくりと変更すると、水平方向の境界線が消えるポイントに到達します。テストは次のとおりです。http://zerostatic.com/float_grid/

CSS:

*{
  margin: 0;
  padding: 0;
  border: 0;
}
ul{
    width:100%;
}
li{
    list-style:none;
    float:left;
    width:33.333333333%;
}
.li-inner{
    border:1px solid red;
    margin-left: -1px;
    margin-top: -1px;
}
img{
    width:100%;
}

HTML:

 <ul>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
            <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
         <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
        <li>
            <div class="li-inner">
              <a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
            </div>
        </li>
    </ul>
4

1 に答える 1

0

あなたの問題は2つあります：

  1. まず、そのページに CSS リセットを使用していません。つまり、個々のブラウザに多くの推測作業を任せているということです。そこには無数の CSS リセットがあり、それらはすべて正常に動作します。次の 3 つから選択することをお勧めします: Iain MacDonand の Strppd、Eric Meyer の Reset、またはHTML5 Starter Pack内のリセット。
  2. 次に、はい、IE は非整数値の計算に関しては少し分厚いので、ポール アイリッシュのこの短い投稿で詳しく説明されている非常に便利なボックス サイジング手法を使用することをお勧めします。
于 2013-04-07T11:06:54.717 に答える