边缘将.jpg图像显示为随机彩色的正方形

Question

我有一个最近才发生的问题，可能是Edge的浏览器错误，因为我确定它以前可以正常工作，但是我有一些.jpg图片未在Edge中显示（但在IE中可以正常显示， Chrome，Firefox）代替，我所看到的只是一种颜色（不同图像的颜色不同-即使没有背景色或其他任何归因颜色-如果图像未显示，则应该为白色-这些图像使用的是半径和阴影样式，但是删除它们没什么区别。

当我右键单击并保存图像时，将下载正确的jpg，该链接是好的，因为我说它可以在其他浏览器上使用，但不再处于边缘状态（我知道什么都没有改变）。有什么想法吗？

在Edge上看到的

在其他浏览器上看到的

我尝试删除样式，并检查div中是否存在重叠或其他常见问题，一切正常。

.sitelinks {
margin: 10px 42px 10px 45px;
padding: 20px 5px 20px 5px;
width: 180px;
vertical-align: top;
display: inline-block;
}
.sitelinks:hover {
background: #CCC;
}
.sitelinks img {
width: 1px;
height: 1px;
box-shadow: 3px 5px 12px #000000;
border-radius: 50%;
}
.sitelinks img:hover {
-o-transform: scale(1.06);
-webkit-transform: scale(1.06);
-ms-transform: scale(1.06);
-moz-transform: scale(1.06);
transform: scale(1.06);
}
.desc {
padding-left: 10px;
padding-top: 10px;
width: 160px;
text-align: center;
font-size: 1.4em;
color: #333;
font-family: 'Quicksand', sans-serif;
font-weight: 600;
}

<div class="sitelinks">
<a href="services.php" target="_self"><img id="link1" 
src="assets/img/services_ico.jpg" alt="Our Services"></a>
<div class="desc"><a href="services.php" target="_self">Our Services</a> 
</div>
</div>
<div class="sitelinks">
<a href="contact.php" target="_self"><img id="link2" 
src="assets/img/contact_ico.jpg" alt="Contact the team"></a>
<div class="desc"><a href="contact.php" target="_self">Contact Us</a></div>
</div>
<div class="sitelinks">
<a href="photos.php" target="_self"><img id="link3" 
src="assets/img/gallery_ico.jpg" alt="Picture Gallery"></a>
<div class="desc"><a href="photos.php" target="_self">Photo gallery</a> 
</div> 
</div>
<div class="sitelinks">
<a href="reviews.php" target="_self"><img id="link4" 
src="assets/img/feedback_ico.jpg" alt="Customer reviews"></a>
<div class="desc"><a href="reviews.php" target="_self">Customer 
testimonials and reviews</a></div>
</div>

有四个图像是相同的html

Answer 1

我发现了问题，Edge不喜欢将jpeg的初始大小设置为1px，增加此值可以像以前一样正常工作-我不知道Edge发生了什么变化，但我将初始大小设置为2px ，一切都很好。

我第一次来这里为您的帮助者们喝彩，但毫无疑问，这将是我的最后一个机会。