在不同的浏览器中显示的百分比（％）宽度不同（firefox，safari，opera，chrome） [英] percent (%) width rendered differently in different browser (firefox, safari, opera, chrome)

问题描述

我使用 div width 中的百分比（％）来包装图片 code>但问题是每个浏览器都会以不同的方式呈现它为什么会发生这种情况。顺便说一句 firefox 完美地工作，但是在 safari ， chrome 和 opera 不按我想要的方式工作。

如果可能的话，您可以简要说明为什么会发生这种情况!!

提前感谢你.....

下面是图片显示问题： / p>

html：

 < div class =banner> 
< div class =divWrap> 
< div class =imageWrap noMarginLeft>< a href =＃>< img src =images / 130410_Project-tile1.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile2.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile3.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile4.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile5.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile6.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile7.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap noMarginLeft>< a href =＃>< img src =images / 130410_Project-tile8.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile9.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile10.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile11.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile12.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile13.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap>< a href =＃>< img src =images / 130410_Project-tile14.jpgalt =/>< / a> < / DIV> 
< div class =imageWrap noMarginLeft noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile15.jpgalt =/><一个>< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile16.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile17.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile18.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile19.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile20.jpgalt =/>< / a> ;< / DIV> 
< div class =imageWrap noMarginBottom>< a href =＃>< img src =images / 130410_Project-tile21.jpgalt =/>< / a> ;< / DIV> 
< / div> 
 
< / div><！ -  end banner  - > 
  

css：

  .banner {
 float：left; 
宽度：100％; 
} 
 .banner .imageWrap {
 float：left; 
 width：13.772％; 
保证金：0 0 0 .6％; 
背景颜色：＃555 
} 
 
 .banner .imageWrap img {
 float：left; 
最大宽度：100％; 
宽度：100％; 
} 
 
 .noMarginLeft {margin-left：0！important} 
 .noMarginBottom {margin-bottom：0！important} 
  
  
      这里是一篇关于2008年的文章（但今天仍然相关）： 
 
 
  http://robertnyman.com/2008/01/24/how-web-browsers-处理四舍五入时百分比/  
 
I use percent(%) in div width to wrap the image but the problem is every browser render it differently any suggestion why this happen. by the way firefox work perfectly but in safari, chrome and opera don't work the way that i want.

if possible can you give brief explanation why this happen!!

thank you in advance.....

below is the image show the problem:



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}

解决方案
Browsers round percentage widths differently.

Here's an article on it from 2008 (but still relevant today):

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

                        
这篇关于在不同的浏览器中显示的百分比（％）宽度不同（firefox，safari，opera，chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！