位置：固定边距：IE9/10 中的自动

【问题标题】：position: fixed with margin: auto in IE9/10位置：固定边距：IE9/10 中的自动
【发布时间】：2017-03-03 22:47:15
【问题描述】：

我为响应式网站制作了一个粘性标题，其中标题也以margin: 0 auto 为中心。它适用于 Chrome/Firefox/Safari/IE8，但不适用于 IE9+。

最少的标记：

<div class="viewport">
    <header class="banner">
    </header>
</div>

还有风格：

.banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

在 IE9+ 中，标题卡在左侧。

【问题讨论】：

标签： css internet-explorer css-position

【解决方案1】：

您需要专门将width: 100% 添加到您的相关元素中。

Demo

css

.banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: red;
    height: 50px;
}

事实上它在 IE9 中同样有效

【讨论】：

IE11 的呈现方式与 8,9 和 10 不同。MS 几乎在每个版本中都会改变。
你这么说好像是件坏事。
好吧，你来了……我实际上在代码中没有width: 100%。