我为响应式网站制作了一个粘性标题,其中标题也以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+ 中,标题固定在左侧。
您需要特别添加width: 100%
到你有问题的元素。
Demo http://jsfiddle.net/4dgaurav/970w09n8/
css
.banner {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 750px;
margin: 0 auto;
background: red;
height: 50px;
}
事实上,它在 IE9 中同样有效
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)