`

css hack 解决ie6 position:fixed不支持问题

CSS浏览器XHTMLHTMLhack 
阅读更多
最近的一个项目要求做一个侧边栏，固定于窗口的左右侧，但是遇到ie6就熄火了，下面给出一种解决方案（ie6 expression hack）：

主要思路是ie6以上浏览器用position：fixed，此外添加ie6hack，为渲染元素给出_position：absolute，最关键的部分，采用_top:expression(eval(document.documentElement.scrollTop + 30)); 带起fixed中的投top：30px;

此种表达式还有：
document.body.clientWidth 
screen.availWidth
……

但此处为解决dom隐藏问题，在ie6下不支持，我采用了js隐藏，如果谁有更好的方法，拿出来大家一起交流一下

以下给出一个实例： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6 fixed</title>

<style>
html,body{background-image:url(about:blank);background-attachment:fixed;}
.right{
	position:fixed;
	right:-50px;
	top:100px;
	_position:absolute;
	_right:-50px;
	_top:
	expression(eval(document.documentElement.scrollTop+100));
}

</style>
</head>

<body>
	<div class="right" style="height:100px; width:100px; border:1px solid red;"></div>
	<!--<div class="top style="height:30px; width:200px; background:#963;">ss</div>-->
    
    <p>1</p>
    <p>1</p><p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    
</body>
</html>
  • 大小: 3.7 KB
0
顶
1
踩
分享到：
| 货郎担问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics