IE：父级上的“溢出：滚动”和子级上的“边距：0 auto”无法正常工作

Question

我在 Internet Explorer 9+ 中遇到了以下问题，这真的很奇怪。该代码在这些浏览器中产生奇怪的结果，并且在 Chrome/Safari、Firefox 和 Opera 中运行良好。

HTML：

<div class="outer">
    <div class="inner"></div>
</div>

<div class="absolute"></div>

还有 CSS：

.outer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: scroll;
    background: #ECD078;
}

.inner {
    width: 200px;
    height: 2000px;
    margin: 0 auto;
    background: #D95B43;
    border-bottom: 20px solid #53777A;
}

.absolute {
    width: 10px;
    height: 50px;
    background: #53777A;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -110px;
}

外部容器有溢出：自动和位置：固定。内部容器具有设置的宽度和边距：0 auto 以保持居中。除了 IE（所有版本）之外，所有浏览器都可以正常工作。在 IE 中，内部容器没有正确居中，并且向左移动了几个像素。

示例小提琴有一个绝对容器，它位于内部容器旁边，以说明 IE 中的问题。当我从外部容器中删除溢出：自动时，它工作正常，但我需要它，因为它需要可滚动。任何建议为什么会发生这种情况以及如何解决它？提前致谢！

http://jsfiddle.net/g7TpK/2/

Answer 1

它认为这是因为滚动条出现在 Windows 浏览器中，但没有出现在 OSX 浏览器中。 .inner 块以.outer 的内部宽度为中心，即整个窗口宽度减去滚动条。而.absolute 位于整个窗口宽度的中心。

要验证，请将以下 CSS 添加到您的小提琴中，这将强制滚动条出现在 OSX 上的 Chrome 中：

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
    background-color: red;
}

您将获得与在 Windows 中相同的结果。 .inner 块始终正确居中，有或没有滚动条。

对齐块的一种简单方法是在 .outer 块内移动 .absolute 块。这样.inner 和.absolute 都相对于同一个父对象定位。