Html 在不同浏览器（firefox、safari、opera、chrome）中呈现不同宽度的百分比（%）

我在

div

width

中使用百分比（%）来包装

图像

，但问题是每个浏览器呈现的方式都不一样，任何关于为什么会发生这种情况的建议。顺便说一句，

firefox

工作得很好，但是在

safari

中，

chrome

和

opera

没有我想要的工作方式

如果可能的话，你能简要解释一下为什么会发生这种情况

提前谢谢你

下图显示了问题所在：

html:

---

浏览器舍入百分比宽度的方式不同

以下是2008年的一篇文章（但今天仍然相关）：

---

浏览器对百分比宽度的取整方式有所不同

以下是2008年的一篇文章（但今天仍然相关）：

---

在该屏幕截图中，浏览器的宽度是否相同……？尝试将

位置：relative

添加到

。banner

、

。imageWrap

和

。imageWrap img

。给live链接或创建一个Fiddle。我更新图像的宽度是否使用重置样式表？如果不是，那么您应该这样做，否则您将始终遇到不同浏览器对元素有不同默认值的问题。（例如，一些浏览器在链接中有边框或填充，其他浏览器没有）特别是如果您使用

%

宽度，如果所有浏览器都有相同的设置，则会更容易。在该屏幕截图中，浏览器的宽度是否相同……？尝试将

位置：相对
添加到
.banner
，
.imageWrap
和
.imageWrap img
。提供给live链接或创建Fiddle I以相同的宽度更新图像是否使用重置样式表？如果不是，那么您应该这样做，否则您将始终遇到不同浏览器对元素有不同默认值的问题。（例如，一些浏览器在链接中有边框或填充，其他浏览器没有）特别是如果您使用
%
宽度，那么如果所有浏览器都具有相同的设置，则更容易。
<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 -->

.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}