Html Chrome渲染图像大小略有不同？_Html_Css_Cross Browser

Html Chrome渲染图像大小略有不同？

html css

Html Chrome渲染图像大小略有不同？,html,css,cross-browser,Html,Css,Cross Browser,如果你在Chrome上查看网页，它会像画廊一样并排显示这四幅图像。然而，我在IE、Firefox和Safari中测试了这个页面，第四个大概的图像下降到下一行，导致页面不均匀。我注意到其他三种浏览器中的图像大小也稍大一些我从来没有遇到过这样的问题？Chrome渲染图像大小是否不同 <body> <header> <img class="logo" src="Collins.png" /> </header> <section cl

如果你在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;
}


@导入url（reset.css）；
身体{
背景色：#e6；
}
标题{
边缘顶部：75px；
填充底部：50px；
}
img.logo{
保证金：自动；
显示：块；
}
第1节图像容器{
保证金：自动125px；
}
部门经理{
填充物：5px；
不透明度：0.50；
显示：内联块；
宽度：600px；
高度：400px；
}
部门经理经理经理{
高度：400px；
宽度：100%；
}
div.img：悬停{
不透明度：1.0；
}
.集装箱{
填充顶部：50px；
宽度：275px；
保证金：自动；
}
img.icons{
显示：内联块；
保证金：自动20px自动；
填充顶部：50px；
}

很多人都遇到了这个问题。这可能是因为最新的chrome更新。可能有一个bug，我希望谷歌的人将来能解决这个问题

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

要确保其他浏览器中没有差异，请在添加任何样式之前删除所有边距和填充。

这可以通过重置样式表来完成。谷歌/必应或点击一个。

确保没有放大或缩小页面。再次测试并确保所有浏览器均为100%。同样的问题。Chrome浏览器的110%缩放比例与其他浏览器的100%匹配。我已经导入了重置。我似乎已经解决了这个问题。我调整了图像的大小，使其成为两行，而不是试图将四个图像塞进一行中。我将每个图像放在一个属于同一类的div容器中。我在为div容器添加保证金规则，这让一切都变得古怪。取而代之的是，我将四个div容器包装到一个节中，并将边距规则应用到该节中。图像库仍然稍微偏左，但我在IE、Safari和Firefox中正确对齐了页面。我刚刚在chrome和edge中尝试过，我觉得完全一样。我注意到你说你有三张图片，其中一张是下拉的。对我来说，两个呆在原地，两个掉下来。我可以看一些html和css代码吗？您的标签似乎没有正确地将图像div保存在其中。