在 Firefox等非ie浏览器支持 css: position:fixed 来固定浮动层，但是在 ie 下通常只能用 javascript来固定，效果不好。
现在给出一个纯 css 的 IE fixed 完美解决方案：（支持ie5.5+，firefox，opera，chrome等主流浏览器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* the core */
.wrapper{
position:relative;
width:100%;
height:100%;
overflow:auto;
}
.fixed-box{
position:fixed;
}
* html .fixed-box{
position:absolute;
z-index:100;
}
/* the sample */
#topBox, #leftBox, #bottomBox{
padding:5px;
border:1px solid #aaa;
background-color:#fee;
font-size:12px;
}
#topBox{
width:100%;
left:0px;
top:0px;
}
#leftBox{
width:150px;
left:50%;
top:180px;
margin:0 0 0 -370px;
}
#bottomBox{
width:100%;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="height:2000px;">
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
</div>
</div>
<div id="topBox" class="fixed-box">
<p><b>Top Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
<div id="leftBox" class="fixed-box">
<p><b>Left Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
<div id="bottomBox" class="fixed-box">
<p><b>Bottom Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
</body>
</html>
分享到：
相关推荐
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
在`ie6.css`中，我们可以使用其他方法替代`position: fixed;`，如`position: absolute;`配合JavaScript进行动态调整。 2. **使用expression()表达式**： IE6支持CSS表达式，可以通过它来计算元素的位置。例如，...
然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器中，`position:fixed`的实现并不完美，需要采用特定的“hack”技巧来实现类似的效果。 首先，我们来详细理解`position:fixed`的正常...
对于旧版IE浏览器，如IE6，可能不支持position:fixed或者transform属性。在这种情况下，可以通过设置_position:absolute作为兼容性写法，确保在不支持fixed的浏览器中，元素仍然能够尽可能地居中。 在实现居中时，...
描述中提到的"完美兼容IE6"是一个挑战，因为IE6对CSS标准的支持并不完全，尤其是对于`position: fixed;`的处理存在一些问题。在其他现代浏览器中，`position: fixed;`工作得相当好，但在IE6中，需要采用一些特殊的...
通过这种方法，即使在IE6这样的旧版本浏览器中，也可以实现类似 `position:fixed` 的效果。这种方法的关键在于利用JavaScript动态计算和更新元素的位置，以达到与 `position:fixed` 相似的视觉效果。 在实际应用中...
由于IE6不完全支持CSS的`position: fixed`，开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果，以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。 首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...
通过以上方法，可以在IE6中实现接近`position: fixed;`的效果。虽然这种方法不是完美的解决方案，但考虑到IE6的历史地位以及其在某些组织中的持久使用，这些技巧仍然具有一定的实用价值。对于现代Web开发来说，建议...
`position: fixed` 是 CSS 中的一个定位属性，用于实现这种效果。然而，由于不同浏览器之间的兼容性问题，使用 `position: fixed` 时可能会遇到一些挑战，特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...
其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性，这个属性允许元素在页面滚动时保持其在屏幕上的位置，常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好，但在IE...
本文将详细讲解如何使用CSS表达式（expression）来解决IE6中`position:fixed`无效的问题。 首先，我们来看一个常见的解决方法。在非IE6浏览器中，`position:fixed`可以直接应用到元素上，如下所示： ```css #gs { ...
本文将探讨两种在 IE6 中模拟 `position: fixed;` 的方法。 1. **纯 CSS 法**： 这种方法主要依赖于 IE6 特有的 * 选择器。通过将 `* html` 作为顶层选择器，我们可以针对 IE6 应用特定的样式。首先隐藏浏览器的...
在非IE6浏览器中，实现`fixed`定位只需在CSS中添加`position: fixed`，并指定`top`、`right`、`bottom`或`left`属性即可。但在IE6中，由于不支持`fixed`定位，我们需要寻找替代方案。一种常见的解决方法是利用...
在IE6浏览器中，`position:fixed`是一个棘手的问题，因为这个浏览器并不原生支持这一CSS定位方式。`position:fixed`允许元素相对于浏览器窗口进行定位，即使页面滚动，该元素仍然保持在屏幕的固定位置。这对于创建如...
本文将详细介绍如何解决 IE6 不支持 `position:fixed` 的问题，并提供一种完美的解决方案。 首先，让我们分析一下 IE6 中的 `position:fixed` bug。在标准浏览器中，设置 `position:fixed` 可以使元素相对于浏览器...
在本文中，我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先，我们需要理解这两个关键概念。 `window.onscroll`事件是...