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

Question

好吧，我已经苦思冥想了好几个小时，但无法在 IE9 中正常运行(我不关心以前的版本)。我应该提一下，我正在用 HTML5 编写代码，并使用适用于 IE 的 HTLM5Shiv 回退。

我正在制作一个 Sequence.js 响应式 slider 。由于背景图像， slider 是全宽的，但它有一个最大宽度为 940 像素的内容包装器 div，并且它位于页面中央。

            <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 以及所有#slider ul li 元素的宽度均为 100%。 li 元素也将 text-align 属性设置为居中。

#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 slider (如您在上面所见)要求 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 像素时，它确实会改变行为，但我不确定在这种情况下你想做什么。对不起。