在IE6下实现fixed定位效果

最新推荐文章于 2021-06-10 12:41:12 发布

jyy_12

最新推荐文章于 2021-06-10 12:41:12 发布

阅读量1k

点赞数

分类专栏： CSS HTML 文章标签： ie html xhtml div 浏览器 class

本文链接：https://blog.csdn.net/jyy_12/article/details/6542379

版权

CSS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

来源：CSSplay http://www.cssplay.co.uk/layouts/fixed.html

注：IE6/IE7下默认的滚动条认为是html标签的，其它浏览器显示的是body标签的滚动条。IE6支持body height 100%定义。“* html body”定义方法只有IE6支持，意指在html标签外还有一个标签。“*+html”只有IE7支持，html标签存在一个兄弟节点。

<!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=gb2312" /><title></title><style type="text/css">body{height:100%; overflow:auto;margin:0;padding:0;}.box{width:200px;height:300px;background-color:#ccc;position:fixed;_position:absolute;left:100px;top:50px;border:1px solid red;}</style></head><body><div class="box"></div>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</body></html>

IE6下当body有元素是相对定位时也会出现fixed效果，解决方法为把所用内容用一个div包裹（除需模拟fixed 效果的元素外），并用此div代替body模拟滚动条效果。

针对IE6的样式：

html {overflow-x:auto;overflow-y:hidden; }
body{height:100%;}

包裹用的div添加样式：

height:100%;width:100%;overflow-y:scroll;position:absolute;

jyy_12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在IE6下实现fixed定位效果

来源：CSSplay http://www.cssplay.co.uk/layouts/fixed.html注：IE6/IE7下默认的滚动条认为是html标签的，其它浏览器显示的是body标签的滚动条。IE6支持body height 100%定义。“* html body”定义方法只有IE6支持，意指在html标签外还有一个标签。“*+html”只有IE7支持，html标签存在一个兄弟节点。bo
复制链接

扫一扫

专栏目录