gpt4 book ai didi

html - 百分比 (%) 宽度在不同浏览器(firefox、safari、opera、chrome)中呈现不同

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:21 25 4
gpt4 key购买 nike

我在 div width 中使用 percent(%) 来包装 image 但问题是每个浏览器都会以不同的方式呈现它,任何建议为什么会这样发生。顺便说一下,firefox 可以完美运行,但在 safari 中,chromeopera 无法按照我想要的方式运行.

如果可能的话,你能简单解释一下为什么会这样!!

提前谢谢你......

下图显示了问题:

enter image description here

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}

最佳答案

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

这是 2008 年的一篇文章(但今天仍然相关):

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

关于html - 百分比 (%) 宽度在不同浏览器(firefox、safari、opera、chrome)中呈现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16051373/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com