<!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;
}
#container{
width: 90%;
background-color:#ccc;
margin:0 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:100px;
left:120px;
top:120px;
}
#leftBox{
width:150px;
left:50%;
top:180px;
/*margin:0 0 0 -370px;*/
}
#bottomBox{
width:100%;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div >
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<div style="height:500px;background-color:lightblue;"> <p>一段内容(高度500px)</p></div>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容 over</p>
</div>
</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>
分享到：
相关推荐
在互联网早期，Internet Explorer 6 (IE6) 是一个广泛使用的浏览器，但它的CSS支持并不完善，特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素，使得元素相对于视口...
然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器中，`position:fixed`的实现并不完美，需要采用特定的“hack”技巧来实现类似的效果。 首先，我们来详细理解`position:fixed`的正常...
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
然而，不幸的是，Internet Explorer 6 (IE6) 并不支持 `position:fixed`，这就给开发者带来了兼容性问题。 为了解决IE6中的这个问题，通常需要借助JavaScript来模拟 `position:fixed` 的效果。以下是一个实现兼容性...
然而，由于不同浏览器之间的兼容性问题，使用 `position: fixed` 时可能会遇到一些挑战，特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定的描述和代码示例中，作者提供了一个跨浏览器的 `position: fixed`...
描述中提到的"完美兼容IE6"是一个挑战，因为IE6对CSS标准的支持并不完全，尤其是对于`position: fixed;`的处理存在一些问题。在其他现代浏览器中，`position: fixed;`工作得相当好，但在IE6中，需要采用一些特殊的...
这个HTML文件很可能会包含JavaScript代码和CSS样式，用于创建一个具有Lightbox效果、Windows关机动画、使用`div`覆盖页面并解决了IE6的`position:fixed`兼容性问题的页面。 总的来说，这个知识点涵盖了Web开发中的...
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。 首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
在本文中，我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先，我们需要理解这两个关键概念。 `window.onscroll`事件是...
本文将探讨两种在 IE6 中模拟 `position: fixed;` 的方法。 1. **纯 CSS 法**： 这种方法主要依赖于 IE6 特有的 * 选择器。通过将 `* html` 作为顶层选择器，我们可以针对 IE6 应用特定的样式。首先隐藏浏览器的...
为了解决这个问题，我们需要一种兼容IE6的方法来模拟`position: fixed;`的效果。 #### 解决方案 为了克服IE6中的这一限制，可以采用以下策略： 1. **使用条件注释**：首先，利用HTML中的条件注释来为目标浏览器...
标题中的“IE6 position:fixed bug (固定窗口方法)”指的是在Internet Explorer 6浏览器中，使用CSS的`position:fixed`属性时出现的一个兼容性问题。`position:fixed`通常用于创建固定定位的元素，使其在页面滚动时...
以上就是解决IE6中 `position:fixed` 兼容性的技巧。需要注意的是，这些方法仅适用于IE6，对于其他版本的IE或者现代浏览器，可以直接使用 `position:fixed`。在实际开发中，考虑到跨浏览器兼容性和性能，通常会结合...
在网页开发中，IE6（Internet Explorer 6）的许多特性与现代浏览器存在不兼容性，其中`position:fixed`就是一个典型例子。`position:fixed`在其他浏览器中可以让元素保持在视口的固定位置，不论用户如何滚动页面，但...
对于旧版IE浏览器，如IE6，可能不支持position:fixed或者transform属性。在这种情况下，可以通过设置_position:absolute作为兼容性写法，确保在不支持fixed的浏览器中，元素仍然能够尽可能地居中。 在实现居中时，...