position: fixed with margin: auto in IE9/10

问题:

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+.

Minimal markup:

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

And the style:

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

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

回答1:

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;
}

---

In-fact it works equally well in IE9