Question

我正在开展一个项目，我正在使用woocommerce dynamic gallery pro插件来预览产品页面中的产品图片。但问题是预览图像在IE中显示了一半。

请你们查看IE中的以下链接并帮我修复。

我找到了解决办法，但我不明白我是如何应用的。

我注意到如果我从下面的类中删除位置，它可能会修复错误。但是当我给位置一些价值，如绝对，相对，固定，静态甚至继承。在我离开这个职位之前，它没有给出任何回应。

所以伙计们帮我解决这个问题。

以下是我的更改。这影响了50％。

.ad-gallery .ad-image-wrapper .ad-image {
    overflow: visible !important;
    position: inherit !important;
}

但是位置不起作用

Answer 1

我现在不在寡妇的盒子里，但可能是没有清除浮动的情况，或者父项不包含漂浮的孩子。

尝试使用：溢出：在父容器上自动显示任何图像未完全显示。也可以尝试使用overflow：hidden来实现相同但在某些情况下避免滚动条。

尽可能避免在生产网站上使用！important。

Answer 2

你应该真的避免这么多内联样式。它会导致代码混乱和更多工作。

出于某种原因，您将.ad-image设置为{top: 179px;}。试试这个（删除内联顶部语句后）：

.ad-gallery .ad-image-wrapper .ad-image {
    top: 0;
}

奇怪的是，我在Firefox中看到{top: .5px}。我不确定发生了什么。

Answer 3

OP，您使用的是哪个版本的IE？

position属性指定用于元素的定位方法的类型（静态，相对，绝对或固定）。

注意： IE7及更早版本不支持“inherit”值。 IE8需要一个！DOCTYPE。 IE9支持“继承”。

IE 7/8解决方法：

.ad-gallery .ad-image-wrapper .ad-image {
    overflow: visible !important;
   position: <whatever-the-parent-is> !important;
}

由于IE 7/8无法理解inherit元素父级的位置，因此您可以创建一个CSS规则，指定您希望元素使用的position。