HTML 图像在 Chrome 中未正确显示，但在 Safari 和 Firefox 中正确显示答案

【问题标题】：HTML Image not displaying correctly in Chrome, but is displaying correctly in Safari and FirefoxHTML 图像在 Chrome 中未正确显示，但在 Safari 和 Firefox 中正确显示
【发布时间】：2016-01-15 21:16:07
【问题描述】：

<div style="position: relative; left: 0px; top: 0px;"> 

<img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

<img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>

<div>

这是我的 CSS

.container{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background-color: #ffffff;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    padding: 25px;
}

img.imageAAMP{
    width: 800px;
    margin: auto;
    margin-top: auto;
    position: static
}

img.imageAAMP2{
    width: 800px;
    position: absolute;
    margin-left: -800px;
    transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}

img.imageAAMP2:hover{
    opacity: 0;
}

当它应该显示在第一张图像的顶部时，图像位于左下角。这是出于悬停淡入淡出过渡的目的。在 Safari 和 Firefox 上，一切正常，但在 chrome 上显示不正确。

【问题讨论】：

标签： html css image google-chrome alignment

【解决方案1】：

<div style="position: relative; left: 0px; top: 0px;"> 

            <img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

            <img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>
<div>

【讨论】：