Question

你能告诉我我的代码在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>

由于

Answer 1

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

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

这似乎在IE11中为我解决了这个问题。

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

的结果

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

这应该在下面你的Doctype，如链接文档中所示：

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

在IE中破碎的幻灯片

1 个答案: