Css 只有图像在移动设备上消失，但其余内容可见

在iPad mini（768x1024）和Galaxy平板电脑（800x1280）上显示时，只有我的网页中这一行的图像会消失。该部分中的其他内容仍然可见。为什么会发生这种情况？移动设备是否有怪癖，或者我的CSS中是否有错误？（在页面的其余部分，图像和文本都在移动设备上正确显示。）

行的（基本）代码为：

<div class="row" id="advertcontainer">
    <h2 class="wow fadeInUp adjust" data-wow-delay="0.2s" style="max-width: 100%;display: block;">What's On across the Lakeside Group</h2>
    <div class="grid_4 wow fadeIn" data-wow-delay="0.2s">
        <div class="imagediv">
            <a href=""><img src="image.jpg" alt="image test" />
            <div class="transparent_ribbon"></div>
            <div class="overlayeventname">Text here</div>
            <div class="overlayeventplace">More text here</div>
            </a>
        </div>
    </div>
</div><!-- /row /advertcontainer -->

我的完整样式表可以在

这就是它应该看起来的样子 但这正是iPad mini和Galaxy平板电脑所展示的

---

您的CSS中有以下规则：

.imagediv img {
    position: absolute;
    z-index: -1;
}

这将把这些图像移到所有常规层的后面，并将它们的位置更改到容器的左上角（如果它们有

位置：relative

）。如果这些父元素不透明，则图像将保持不可见

---

另外，如果图像大小未在

img

标记内设置，则大小将为0x0，因为没有定义

width

和

height

-->它们将不可见…

@媒体（最小宽度：320px）和（最大宽度：768px）{advertcontainer{display:none；}.imagediv{最大宽度：370px；最大高度：254px；}

如果整个容器都是

显示：无

，为什么要设置图像的

高度

和

宽度

？我似乎找不到问题所在，但你能试着检查它在没有动画效果的情况下是否工作，以及是否使用了JS jquery吗？当我删除wow时，图像会在所有设备上消失。是的，绝对位置是将图像放置在覆盖层和文本后面，这样就可以了。常规层与左上角的图像和文本相对。即使设置了图像宽度和高度，所有移动设备上的图像仍然会消失。

.imagediv img {
    position: absolute;
    z-index: -1;
}