<!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>IE下的纯CSS完美position:fixed实现方案</title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* 核心样式定义 */
.wrapper{
position:relative;
width:100%;
height:100%;
overflow:auto;
}
.fixed-box{
position:fixed;
}
* html .fixed-box{
position:absolute;
z-index:100;
}
/* 使用例子 */
#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:150px;
margin:0 0 0 -200px;
}
#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>固定在顶部</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
<div id="leftBox" class="fixed-box">
<p><b>固定中间某个位置</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
<div id="bottomBox" class="fixed-box">
<p><b>固定在底部</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
</body>
</html>
分享到：
相关推荐
这篇博客“IE6下的纯CSS完美position:fixed实现”可能介绍了一种通过CSS技巧或JavaScript工作来模拟`position: fixed`的方法。 尽管描述为空，我们可以推测博主可能探讨了以下几种常见策略： 1. **表达式...
在`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中，需要采用一些特殊的...
此外，随着浏览器的更新换代，对于现代浏览器，可以完全依赖CSS来实现 `position:fixed`，而不再需要JavaScript进行兼容性处理。但对那些仍然需要支持IE6的项目来说，这样的JavaScript解决方案是必不可少的。
这个例子中的技巧在于，通过媒体查询和 IE 特有的 CSS 规则，让在支持 `position: fixed` 的浏览器中正常工作，同时在不支持的浏览器中采用备选方案，确保了在大多数浏览器中都有良好的用户体验。 总的来说，`...
通过以上方法，可以在IE6中实现接近`position: fixed;`的效果。虽然这种方法不是完美的解决方案，但考虑到IE6的历史地位以及其在某些组织中的持久使用，这些技巧仍然具有一定的实用价值。对于现代Web开发来说，建议...
由于IE6不完全支持CSS的`position: fixed`，开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果，以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...
本文将探讨两种在 IE6 中模拟 `position: fixed;` 的方法。 1. **纯 CSS 法**： 这种方法主要依赖于 IE6 特有的 * 选择器。通过将 `* html` 作为顶层选择器，我们可以针对 IE6 应用特定的样式。首先隐藏浏览器的...
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。 首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...
其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性，这个属性允许元素在页面滚动时保持其在屏幕上的位置，常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好，但在IE...
在CSS3中，`position: fixed` 是一个非常有用的属性，它使得元素相对于浏览器窗口保持固定的位置，即使页面滚动，该元素也会保持在屏幕上的同一位置。然而，当尝试将一个`position: fixed`的元素居中时，常规的居中...
本文将详细介绍如何解决 IE6 不支持 `position:fixed` 的问题，并提供一种完美的解决方案。 首先，让我们分析一下 IE6 中的 `position:fixed` bug。在标准浏览器中，设置 `position:fixed` 可以使元素相对于浏览器...
本文将详细讲解如何使用CSS表达式（expression）来解决IE6中`position:fixed`无效的问题。 首先，我们来看一个常见的解决方法。在非IE6浏览器中，`position:fixed`可以直接应用到元素上，如下所示： ```css #gs { ...
在IE6浏览器中，`position:fixed`是一个棘手的问题，因为这个浏览器并不原生支持这一CSS定位方式。`position:fixed`允许元素相对于浏览器窗口进行定位，即使页面滚动，该元素仍然保持在屏幕的固定位置。这对于创建如...
在本文中，我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先，我们需要理解这两个关键概念。 `window.onscroll`事件是...
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...