javascript - 响应式灯箱在 iPhone 中不起作用

Question

我们正在努力使灯箱响应

这是原始的 CSS:

#mageworxLightbox{ position: absolute;  left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }

已编辑成:

#mageworxLightbox{ position: absolute;  left: 0; width: 100%; height: auto !important;  z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em;  }
#mageworxImageContainer{ padding: 10px; height: auto !important;  }

但关闭按钮在 iPhone 等设备上不再起作用，我不明白为什么；同样在横向模式下，图像未正确调整大小。

这是我们的页面: http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
(要查看灯箱，请在下拉菜单中选择“modello letto”，然后单击其中的任何图像都可以使用)

Answer 1

将此 css 添加到您的样式表中。某些元素具有冲突层，这会导致按钮位于某个层“下方”，因此您不是在单击按钮而是在某个不可见层上。

#mageworxImageDataContainer{
    ...
    position: relative;
}