IE6不兼容position:fixed的多种解决方案分析与总结

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

guaguapi_ndsc

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

阅读量838

点赞数

分类专栏： CSS 文章标签： ie html webkit xhtml border 浏览器

本文链接：https://blog.csdn.net/guaguapi_ndsc/article/details/7961888

版权

引言

解决方案基本思路

1、视窗与网页的区别

2、position:fixed固定定位的含义

3、position:fixed固定定位与position:absolute绝对定位的区别

4、用position:absolute绝对定位模拟position:fixed固定定位的条件

具体解决方案

1、IE6中利用容器对溢出内容的处理方式来实现

总结

引言

position:fixed效果只有在IE6下不支持，在IE7、8、9，火狐（Gecko(FF内核)），谷歌（Webkit）浏览器均支持。

完整实例代码

<!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"><!--注意：必须要加这两行，否则right和bottom定位没有效果-->
 <head>
 <style type="text/css">
 #fixed{position:fixed; right:0px; bottom:0px; border:1px solid; width:100px; height:100px;}   /*IE7、IE8、IE9、火狐（Gecko(FF内核)）、谷歌（Webkit）*/
 </style>
 </head>
 
 <body>
 <div id="fixed">如果该div框不是出现在右下角，那么您使用的浏览器不支持position:fixed固定定位</div>
 </body>
 </html>

测试可知道，position:fixed效果只有在IE6下不支持，在IE7、8、9，火狐（Gecko(FF内核)），谷歌（Webkit）浏览器均支持。

特别注意，必须在在代码开始之前加入文档类型声明，否则right和bottom定位没有效果。

解决方案基本思路

1、视窗与网页的区别

因为涉及定位的参考对象，所以需要先弄明白视窗和网页的区别。窗口大小是指我们看到的可见区域大小；网页大小是指一个HTML网页的大小，这是两个不同的概念。利用JS可看出二者的不同。

完整实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

最低0.47元/天解锁文章

guaguapi_ndsc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6不兼容position:fixed的多种解决方案分析与总结

目录引言解决方案基本思路 1、视窗与网页的区别 2、position:fixed固定定位的含义 3、position:fixed固定定位与position:absolute绝对定位的区别 4、用position:absolute绝对定位模拟position:fixed固定
复制链接

扫一扫

专栏目录