html - 在 IE、Chrome、Safari 中显示时在 Firefox 中具有绝对位置的 IMG 不可见 - 为什么？

Question

下面的 slide 类元素应保持固定的宽高比，由 CSS 中的 padding-bottom:44%; 控制。内部元素(具有 slide 类的图像)应在缩放到 100% 宽度时裁剪以适合框。

现在我的问题是，这在 Chrome、Safari、甚至 IE 中都可以正常工作，但在 Firefox 中它根本不会显示。这是为什么？

我的 HTML:

<header class="swiper-container">
  <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="slide" src="https://cranmoremtlodge.files.wordpress.com/2008/09/fall-foliage-003.jpg" />
        </div>
</header>

我的 CSS:

/*these two are mine*/
.swiper-slide {
  width: 1664px; /*assigned as element style by swiper*/
    position:relative;
  padding-bottom:44%;
  overflow: hidden;
}
.swiper-slide .slide {
  position:absolute;
  top:-50%; bottom:-50%;
  margin:auto;
  width: 100%;
  height: auto;
  background: teal;
}

/*these three come with www.idangero.us/swiper/ */
.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.swiper-slide {
    flex-shrink: 0;
    height: 100%;
}

fiddle :https://jsfiddle.net/smauo1wu/5/

Answer 1

您的代码中发生了很多事情，其中​​一些导致了问题。

例如，您没有遵守 CSS rule for percentage heights .此外，您在 .swiper-slide .slide 中的绝对定位似乎不是必需的，并且在调整大小时将您的图像推离屏幕(当其他问题已解决时)。

无论如何，这里有一些修改后的代码可能会对您有所帮助。该图像现在会在所有浏览器中显示和缩放(已在 Chrome、FF 和 IE11 中测试)。

HTML(无变化)

修改后的 CSS

html, body { height: 100%; } /* NEW */

.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100%; /* NEW */
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}

.swiper-slide {
  width: 1664px;
    position:relative;
  padding-bottom:44%;
  overflow: hidden;
  height: 100%; /* NEW */
  width: 100%;
}

.swiper-slide .slide {
  width: 100%;
  height: auto;
  background: teal;
}

DEMO