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

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

原创最新推荐文章于 2021-06-10 12:41:12 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #html #webkit #xhtml #border #浏览器

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文分析了IE6下position:fixed不兼容的问题，通过讲解视窗与网页的区别、fixed定位原理，提出了利用absolute定位模拟fixed的方案，并提供了具体的实现方法和注意事项，确保在IE6上实现类似效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

解决方案基本思路

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" "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>无标题文档</title>
  <script>
  document.write(document.body.clientHeight);
  </script>
  </head>
  
  <body>
  窗口大小和网页大小的区别<br />
  窗口大小(可见区域)：
  <script>
  document.write(document.documentElement.clientHeight);//JS获取窗口大小
  </script>
  <br />
  网页大小（body大小）：
  <script>
  document.write(document.body.clientHeight);//JS获取body网页大小
  </script>
  </body>
  </html>

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

使用position:fixed固定定位的元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。它对文档中其他元素定位没有任何影响， fixed固定定位的元素框相当于浮在文档上面。

使用position:fixed固定定位是相对于视窗本身。

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

position:absolute的表现与position:fixed类似，不同的是参考对象。absolute绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

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

既然absolute的表现与position:fixed类似，可以利用absolute绝对定位模拟fixed固定定位。要使二者效果完全相同，那就是改变absolute绝对定位的参考对象。已经知道，absolute绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。那我们可以设置该元素框没有已定位的祖先元素，结果参考对象变成body（注意，不是html）。

虽然经过第一步处理，absolute元素是相对于body,但fixed元素的绝对位置是相对于html元素的，而不是body。

下面要做的就是设法使body和html效果相同。

具体解决方案

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

我们的目的是将模块固定在窗口的某个位置，而不是网页的某个位置，即“fixed元素的绝对位置是相对于html元素（窗口某个位置）来说，而不是body”。但是，absolute元素是相对body,不是相对html。那，我们需要做的是让窗口位置和网页位置重合，也就是将网页超出窗口部分隐藏（html{overflow:hidden;}），同时让body保持其原有高度（body{height:100%;overflow:auto;}）。

这时，html将只有一个窗口那么高，超过的，直接hide，而body会随高度自动变化。这时，我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。

完整实例代码

<!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>
 <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>
 
 <!--[if IE 6]>
 <style>
 html{overflow:hidden;}/*隐藏超出窗口部分的body内容*/
 body{height:100%;overflow:auto;}/*设置body大小和窗口大小一致（100%），并设置超出窗口的body内容部分自动显示滚动条*/
 #fixed
 {
  position:absolute;
  bottom:0px;
  right:0px;
  width:100px;
  height:100px;
 }
 </style>
 <![endif]-->
 
 </head>
 
 <body>
 <div id="fixed">position:fixed固定定位</div>
 </body>
 </html>

兼容性检查

Trident(IE内核)：IE6、IE7、IE8、IE9均通过
Gecko(FF内核)：火狐检查通过
Webkit：谷歌检查通过

致命缺点

这会使页面上原有的absolute、relation都变成fixed的效果。

测试代码

<!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>
 <style type="text/css">
 *{
 	margin:0px;
 	padding:0px;
 }
 #fixed {
 	position: fixed;
 	right: 0px;
 	bottom: 0px;
 	border: 1px solid;
 	width: 100px;
 	height: 100px;
 }   /*IE7、IE8、IE9、火狐（Gecko(FF内核)）、谷歌（Webkit）*/
 #ab {
 	position:absolute;
 	width: 400px;
 	height: 700px;
 	border: 1px solid;
 }
 #ab2 {
 	position:absolute;
 	right: 0px;
 	bottom: 0px;
 	width: 50px;
 	height: 50px;
 	border: 1px solid;
 }
 </style>
 
 <!--[if IE 6]>
 <style>
 html{overflow:hidden;}
 body{height:100%;overflow:auto;}
 #fixed
 {
  position:absolute;
  bottom:0px;
  right:17px;
  width:100px;
  height:100px;
 }
 #ab {
 	position:absolute;
 	width: 400px;
 	height: 700px;
 	border: 1px solid;
 }
 #ab2 {
 	position:absolute;
 	right: 0px;
 	bottom: 0px;
 	width: 50px;
 	height: 50px;
 	border: 1px solid;
     overflow:auto;
 }
 </style>
 <![endif]-->
 
 </head> 
 
 <body>
 <div id="fixed">position:fixed固定定位</div>
 <div id="ab"> 
 超出视窗的div框。position:absolute绝对定位，以使里面的div参考对象不是body。
  <div id="ab2">position:absolute绝对定位，超出视窗的时候，你将看不到这个div框</div>
 </div>
 </body>
 </html>

总结

fixed元素的绝对位置是相对于html元素来说，滚动条是body元素的；absolute绝对定位的元素的位置是相对于最近的已定位祖先（父级）元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素），而不是html元素。
使用了fixed元素的标签（div）不论放在文档何处，均不影响效果。所以，如果要使用fixed元素，那不如将使用该元素的标签（div）放在body开始之后，其他标签之前，因为这样可以查找方便。

参考文献