html - CSS位置使图像预览一半可见

Question

我正在做一个项目，我正在使用 woocommerce 动态图库专业插件来预览产品页面中的产品图片。但问题是预览图像在 IE 中显示一半。

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

我找到了解决方法，但我不明白我如何应用它。

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

所以请大家帮我解决这个问题。

以下是我的更改。影响 50%。

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

但是位置的东西不起作用

score 0 · Accepted Answer

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

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

如果可能，尽量避免在生产站点上使用 !important。

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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您希望元素使用什么。

3 回答 3