Question

好吧，所以我一直在敲我的头几个小时，不能在IE9中完成这项工作（我不关心以前的版本）。我应该提一下，我在HTML5中使用HTLM5Shiv回退进行IE编码。

我正在创建一个Sequence.js响应滑块。由于背景图像，滑块是全宽的，但它有一个内容包装器div，最大宽度为940px，并且它以页面为中心。

            <div id="slider">
                <ul class="sequence-canvas">
                    <li>
                        <div class="slider-bg-img slide-1"></div> <!-- every slide has a different background image that has full 100% width -->
                        <div class="slider-wrapper">
                            CONTENTS GO HERE
                        </div
                    </li>
                    ...
                </ul>
            </div>

#slider div的宽度为100％，以及所有#slider ul li元素。 li元素还将text-align属性设置为center。

#slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 500px;
}
#slider > .sequence-canvas {
    height: 100%;
    width: 100%;
}
#slider > .sequence-canvas > li {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
#slider > .sequence-canvas li > * {
    position: absolute;
}

现在问题在于div.slider-wrapper，我希望它的最大宽度为940px - 它没有定义的宽度，因为它应该在较小的设备上响应，我不想要一千媒体查询。我也希望它以页面为中心。但是Sequence.js滑块（如上所示）要求绝对定位li元素的所有第一个子元素。我已经设法在所有浏览器中居中这个div，但它在IE9中不起作用（即使我在父div上设置'text-align：center'）。

.slider-wrapper {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

IE9中是否有解决方案？这是JSFiddle：http://jsfiddle.net/Q5YYb/

Answer 1

IE9中的工作是this fiddle。

它改变了div的样式，如下所示：

.slider-wrapper {
    max-width: 300px;
    margin-left: -150px;
    left: 50%;
    right: 0;
    background: #999999;
}

你能用它吗？当窗口窄于300像素时，它会改变行为，但我不确定在这种情况下你想做什么。遗憾。

在Internet Explorer 9中居中绝对定位宽度未知的元素

1 个答案: