位置:固定边距:IE9/10自动

Question

我为响应式网站制作了一个粘性标题,其中标题也位于中心位置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 +中,标题卡在左侧.

Answer 1

您需要专门添加width: 100%到您的元素中.

演示

CSS

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

实际上它在IE9中同样有效