Question

http://www.public.asu.edu/~dscolli1/photography/collins.html

如果您在Chrome上查看网页，它会像图库一样并排显示四个图片。但是，我在IE，Firefox和Safari中测试了该页面，并且球场的第四个图像下降到下一行并导致页面不均匀。我注意到其他三种浏览器中的图像尺寸也略大。

我从未遇到过这样的问题？ Chrome会以不同的方式呈现图片尺寸吗？

<body>

<header>
    <img class="logo" src="Collins.png" />
</header>

<section class="imagecontainer">

    <div class="img">
  <a target="_blank" href="Tettegouche-.jpg">
    <img src="Tettegouche-.jpg" alt="Tettegouche State Park">
  </a>

</div>

<div class="img">
  <a target="_blank" href="grove.jpg">
    <img src="grove.jpg" alt="Spring Grove">
  </a>

</div>

<div class="img">
  <a target="_blank" href="oceandrive.jpg">
    <img src="oceandrive.jpg" alt="Lake Michigan Sunrise">
  </a>

</div>

<div class="img">
  <a target="_blank" href="Reds.jpg">
    <img src="Reds.jpg" alt="GABP">
  </a>

</div>

</section>

<section class="container">
    <a href="https://www.instagram.com/dxcc17/"><img class="icons"     
src="instagram.png" /></a>
    <a href="https://www.flickr.com/photos/131549031@N04/"><img   
class="icons" src="Flickr.png" /></a>
</section>

</body>
</html>


@import url(reset.css);


body {
background-color: #e6e6e6;
}
header {
margin-top: 75px;
padding-bottom: 50px;
}
img.logo {
margin: auto;
display: block;
}

section.imagecontainer {
margin: auto auto auto 125px;
}

div.img {
padding: 5px;
opacity: 0.50;
display: inline-block;
width: 600px;
height: 400px;
}

div.img img {
height: 400px;
width: 100%;
}

div.img:hover {
opacity: 1.0;
}

.container {
padding-top: 50px;
width: 275px;
margin: auto;
}

img.icons {
display: inline-block;
margin: auto auto 20px auto;
padding-top: 50px;
}

Answer 1

目前还没有人提到这一点，但浏览器对如何处理某些标签有不同的规则，例如默认情况下添加边距或填充。

要确保其他浏览器没有差异，请在添加任何样式之前删除所有边距和填充。这可以通过重置样式表来完成。谷歌/ Bing它或只需点击here即可。

Answer 2

很多人都遇到了这个问题。这可能是由于最新的Chrome更新。可能有一个错误，我希望谷歌有人将来会解决这个问题。

Chrome渲染图像尺寸略有不同？

2 个答案: