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

Question

当我在iPad mini（768x1024）和Galaxy Tablet（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 -->

在我的CSS中，我设置了一个768的断点来隐藏整行：

 @media (min-width: 320px) and (max-width: 768px) {
  #advertcontainer {
    display: none;
  }
}

我的完整样式表可以在http://www.lakesidesurrey.co.uk/css/style.css

查看

这应该是的样子 但这就是iPad mini和Galaxy Tablet上显示的内容

Answer 1

你的CSS中有这个规则：

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

这会将那些图像移到所有常规图层后面，并将它们的位置更改为容器的左上角（如果它们有position: relative）。如果这些父元素不透明，则图像将保持不可见。

另外，如果图片大小未在img标记内设置，则尺寸将为0x0，因为没有定义的width和height - ＆gt;他们将是隐形的......