【发布时间】：2013-04-17 15:00:16
【问题描述】：
我在 div width 中使用 percent(%) 来包装 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}
【问题讨论】：
-
在那个屏幕截图中，浏览器的宽度是否相同......？
-
尝试将
position:relative添加到.banner、.imageWrap和.imageWrap img。 -
提供实时链接或创建小提琴
-
我用相同的宽度更新图像
-
您使用重置样式表吗？如果没有，那么你应该这样做，否则你总是会遇到不同浏览器对元素有不同默认值的问题。 （例如，某些浏览器在链接中为图像提供边框或填充，而其他浏览器则没有）特别是如果您使用
%宽度，如果所有浏览器都具有相同的设置，则会更容易。