位置：以边距固定：在IE9 / 10中为自动 [英] position: fixed with margin: auto in IE9/10

问题描述

我为响应式网站制作了一个粘性标头，该标头还以 margin：0 auto 为中心。它可以在Chrome / Firefox / Safari / IE8中使用，但不能在IE9 +中使用。

I've made a sticky header for a responsive site where the header also is centered with margin: 0 auto. It works in Chrome/Firefox/Safari/IE8 but not in 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 +中，标头卡在左侧。

In IE9+ the header is stuck to the left side.

推荐答案

您需要在有问题的元素中特别添加 width：100％。

You need to specifically add width: 100% to your element in question.

演示

Demo

css

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

---

实际上有效在IE9中同样有效

---

In-fact it works equally well in IE9

这篇关于位置：以边距固定：在IE9 / 10中为自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！