Question

我有一个图片幻灯片，它使用JavaScript将一个名为.hide的类应用于所有图像，但是首次加载页面。这隐藏了所有图像，但第一个。

我在Internet Explorer 8（我必须支持）中注意到，在加载幻灯片时，第一个图像显示正确（因为它没有隐藏）但是当我点击＆＃34;下一个＆＃34;并且显示隐藏的图像，该图像具有零维度。

在网上进行研究后，我发现对于IE 8，带有display：none的元素将没有任何尺寸。

我的JavaScript在运行之前等待窗口和图像加载，我认为这样可以让图像在隐藏之前在IE 8中有一个维度：

window.onload = function() {
  // Hide all but first photo
  hidePhotos();
  addControls();
  progressSlides();
};

我读到了可见性：隐藏或不透明度：0可以用来代替。但是，这会在隐藏图像的幻灯片下方留下大量空白区域。

HTML：

<div class="slideshow">
                <figure class="image">
                    <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg"  />
                    <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
                </figure>
                <figure class="image">
                    <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>
                <figure class="image">
                    <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>

CSS：

.slideshow {
  position:relative;
/* To position slideshow buttons */
  max-width:920px
}


.hide {
  display: none;
}

.slideshow img {
  width:100%;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  margin-top: 1em;
}

JS小提琴：http://jsfiddle.net/amykirst/tnLLhu4j/

我尝试使用绝对定位将图像放在包含.slideshow div的顶部，但这会导致两个问题：

它给.slideshow一个高度和宽度为0，因为它的孩子都是绝对定位的。缺少尺寸允许幻灯片超出布局，而不是被.slideshow包含。

页面上的任何文字都被遮挡了，因此如果幻灯片放映的上方或下方有文字，则幻灯片显示会显示在其上方。

此外，通过绝对定位，我无法将幻灯片放映容器（.slideshow）设置为包含图像的最大宽度为100％并使其响应，因为幻灯片已从流中移除。

如何在页面加载时隐藏图像并让它们在IE 8中保留其尺寸，而不会在幻灯片下方留下一堆空白区域，因为不透明度：0或可见性：隐藏会发生什么？

Answer 1

我找到了一个有效的解决方案。

.hide {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

我需要隐藏的图像跨越幻灯片的整个宽度（否则，当隐藏的类被删除时，IE 8给图像零维度），所以我使用左右定位0.

因为绝对定位仅用于隐藏的元素，所以它不会导致我之前提到的布局出现问题，因为只有隐藏的元素受到影响。

如何使用显示：IE 8中没有丢失图像尺寸

1 个答案: