CSS position:fixed for IE
日期：2013-10-10 浏览次数：21142 次
position:fixed; 是fixed的用法,配合overflow实现将一个元素固定定位到网页的一个位置上面
Main CSS
CSS for IE
Xhtml:
由于非IE的主流浏览器都支持position:fixed;所以只需求给IE设置一下fixed效果。
第一步让IE下#menu具有绝对定位
第二步去掉外侧滚动条，由于外侧没有滚动效果
Main CSS
html {background:#ccc;}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}
body {font-family: georgia, serif; font-size:12px;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}
* html #menu {position:absolute;}/*only for ie*/
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}
body {font-family: georgia, serif; font-size:12px;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}
* html #menu {position:absolute;}/*only for ie*/
CSS for IE
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
Xhtml:
<div id="menu">
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
</div>
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
</div>
由于非IE的主流浏览器都支持position:fixed;所以只需求给IE设置一下fixed效果。
第一步让IE下#menu具有绝对定位
* html #menu {position:absolute;}/*only for ie*/
结果看到有两个纵轴滚动条，外围是html的，内侧是body的。第二步去掉外侧滚动条，由于外侧没有滚动效果
html {overflow-x:auto; overflow-y:hidden;}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
