％的在不同的瀏覽器（Firefox，Safari，Opera或鉻）

Question

我使用divwidth百分比（％）來包裝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} 

Answer 1

瀏覽器對百分比寬度進行不同的修改。

這裏的（但仍適用於今天）從2008年的一篇文章：

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