Chrome 渲染图像大小的方式略有不同？答案

【问题标题】：Chrome is rendering image-size slightly differently?Chrome 渲染图像大小的方式略有不同？
【发布时间】：2016-09-28 13:11:40
【问题描述】：

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

【问题讨论】：

确保您没有放大或缩小页面。
再次测试并确保所有浏览器都处于 100%。同样的问题。
Chrome 上的 110% 缩放与其他浏览器的 100% 视图相匹配。

标签： html css cross-browser

【解决方案1】：

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

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

【讨论】：

我已经导入了重置。我似乎已经解决了这个问题。我调整了图像的大小，使其变成两行，而不是试图将四个图像塞进一行。我将每个图像放在属于同一类的 div 容器内。我正在为 div 容器添加边距规则，这会使所有东西都乱七八糟。相反，我将四个 div 容器包装成一个部分，并将边距规则应用于该部分。
Chrome 的显示仍然很奇怪。图片库仍然稍微靠左，但我的页面在 IE、Safari 和 Firefox 中正确对齐。
我刚刚在 chrome 和 edge 中尝试过，它对我来说看起来完全一样。我注意到你说你有三张图片，其中一张是下拉的。对我来说，两个留在原地，两个下降。我可以看到一些 html 和 css 代码吗？您的
标记似乎没有正确地将图像 div 保存在其中。

【解决方案2】：

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

【讨论】：