2

私はパーセント（％）を使用しdiv widthてラップしますimageが、問題はすべてのブラウザが異なる方法でレンダリングすることであり、これが発生する理由を示唆しています。ちなみに、firefox完全に動作しますが、safariでは、思い通りに動作しませんchrome。opera

可能であれば、なぜこれが起こるのか簡単に説明していただけますか!!

前もって感謝します.....

以下は、問題を示す画像です。

ここに画像の説明を入力

html:

<div class="banner">
      <div class="divWrap">
        <div class="imageWrap noMarginLeft"><a href="#"><img src="images/130410_Project-tile1.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile2.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile3.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile4.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile5.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile6.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile7.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginLeft"><a href="#"><img src="images/130410_Project-tile8.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile9.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile10.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile11.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile12.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile13.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile14.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginLeft noMarginBottom"><a href="#"><img src="images/130410_Project-tile15.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile16.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile17.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile18.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile19.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile20.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile21.jpg" alt="" /></a></div>
      </div>  

    </div><!-- end banner -->

CSS:

.banner{
  float:left;
  width:100%;
}
.banner .imageWrap {
  float:left;
  width:13.772%;
  margin:0 0 0 .6%;
  background-color:#555
}

.banner .imageWrap img {
  float:left;
  max-width:100%;
  width:100%;
}

.noMarginLeft {margin-left:0 !important}
.noMarginBottom {margin-bottom:0 !important}
4

1 に答える 1

4

ブラウザーは、パーセンテージ幅の丸め方が異なります。

これは2008年の記事です（ただし、今日でも関連があります）：

http://robertnyman.com/2008/01/24/how-web-browsers-handle-rounding-when-it-comes-to-values-set-in-percentage/

于 2013-04-17T07:00:16.207 に答える