IE中的幻灯片损坏答案

【问题标题】：Broken slideshow in IEIE中的幻灯片损坏
【发布时间】：2014-02-01 06:21:54
【问题描述】：

你能告诉我我的代码在 IE 中的问题在哪里吗？

http://dv-projects.bluefile.cz/huno/

幻灯片不工作。似乎是 CSS 的问题。

IE版本：11.0.2

HTML：

<div class="slider-wrapper">
            <article class="slider">
                <div class="slide-1">
                    <div class="slider-image"></div>
                    <div class="slider-info">
                        <h2>Nový produkt v nabídce</h2>
                        <p>Lorem ipsum...
                        </p>
                    </div>
                    <a href="#" class="slider-button"></a>
                </div>
                <div class="slide-2">
                    <div class="slider-image"></div>
                    <div class="slider-info">
                        <h2>Novinka na trhu!</h2>
                        <p>Lorem ipsum...
                        </p>
                    </div>
                    <a href="#" class="slider-button"></a>
                </div>
                <div class="slide-3">
                    <div class="slider-image"></div>
                    <div class="slider-info">
                        <h2>Kvalita a spolehlivost zaručena</h2>
                        <p>Lorem ipsum...
                        </p>
                    </div>
                </div>
                <div class="slider-radio-buttons">
                    <div class="on slide1"></div>
                    <div class="off slide2"></div>
                    <div class="off slide3"></div>
                </div>
            </article>
        </div>

谢谢

【问题讨论】：

不喜欢你的网站。在此处发布您的代码。它工作得很好，你只是忘了在你的 CSS 中使用跨浏览器不透明度。
请分享您遇到问题的 IE 版本；旧版本的 IE 与现代版本完全不同。
从您的 HTML 删除此行
抱歉，还不够继续。 “幻灯片”一开始就模棱两可。如果您的意思是带有 class="slider" 的旋转木马/滑块，那么这似乎工作正常。除非它应该是自动化的。在这种情况下，我会怀疑是 javascript 问题而不是 CSS 问题。
@JonathanSampson 对我来说，它在 IE9 中以 Quirks 模式加载

标签： css internet-explorer validation cross-browser compatibility

【解决方案1】：

绝对定位的元素不受父级不透明度设置为 0 的影响。为了解决此问题，请将子级的不透明度设置为“继承”：

.slider-image, 
.slider-info {
    opacity: inherit;
}

这似乎已经为我解决了 IE11 中的问题。

正如上面的 cmets 所指出的，在某些旧版本的 Internet Explorer 中，您的文档正在加载到 Quirks 模式。这似乎是Mark of the Web 的结果：

<!-- saved from url=(0014)about:internet -->

这应该在您的文档类型下方，如链接文档中所示：

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>

【讨论】：

是的，就是这个！太感谢了。 :)