`

纯CSS兼容IE6的模拟的fixed效果_不抖动

    博客分类：
  • css
css 
阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS兼容IE6的模拟的fixed效果</title>
<style>
* { margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
.page { height:100%; overflow:auto; }
.floatbar { position:absolute; bottom:0; left:2%; border:1px solid #ccc; background:#06c; color:#fff; height:30px; width:95%; }
</style>
</head>
<body>
<!--此处page的div模拟body的表现-->
<div class="page">
	<div style="height:1500px">内容区</div>
</div>
<!--/此处page的div模拟body的表现-->
<div class="floatbar">模拟的固定fixed效果 </div>
</body>
</html>

 绝对底部效果:

 

<!DOCTYPE>
<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">
* { margin:0; padding:0; }
html, body { height:100%; }
.wrapper { min-height:100%; _height:100%; }
.body { padding-bottom:100px; }
.footer { margin-top:-100px; height:100px; background:red; }
</style>
</head>
<body>
<div class="wrapper">
	<div class="body">
		<script type="text/javascript">
		for(var i=0; i<10; i++){ //可增加或减少i值
			document.write(i+"<br />");
		}
		</script>
	</div>
</div>
<div class="footer"> footer </div>
</body>
</html>
分享到：
| Properties文件-增删改查
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery固定层顶部固定层和底部固定层IE6不抖动

    然而，IE6对CSS的固定定位支持并不完善，这可能导致在页面滚动时元素出现闪烁、抖动或者定位不准确的问题。 jQuery作为一个强大的JavaScript库，提供了许多功能来增强和优化网页交互，包括处理定位问题。然而，对于...

    css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法

    ### CSS兼容IE6、IE7及Firefox的Fixed定位方法 #### 背景与目标 在Web开发过程中，为了确保网站在不同浏览器上的兼容性，开发者经常需要采取一系列措施来应对旧版本浏览器（如IE6、IE7）的限制。其中，`position: ...

    CSS行为expression轻松实现IE6无抖动固定定位

    在早期的Web开发中，尤其是针对Internet Explorer 6 (IE6) 的兼容性问题，开发者经常面临一个挑战：IE6不支持CSS中的`position: fixed`属性，这意味着无法实现元素随滚动条固定显示的效果。然而，为了在IE6中模拟这...

    IE6不兼容position:fixed属性的解决办法分享

    及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...

    基于jquery的返回顶部效果（兼容IE6）

    本篇文章将详细讲解如何使用jQuery来实现一个兼容IE6的返回顶部效果。 首先，我们来看HTML部分。这里创建了一个类名为`scroll`的div元素，它将作为返回顶部的按钮。这个div设置了背景图（`scroll.gif`），并使用`...

    详解IE6中的position：fixed问题与随滚动条滚动的效果

    综合以上内容，我们可以知道，要解决IE6中的position: fixed问题，需要利用javascript表达式和特定的CSS滤镜语法，来模拟出其他浏览器中position: fixed所提供的效果。这种做法虽然复杂，但可以在不牺牲太多可读性...

    IE6中的position:fixed定位兼容性写法分享

    在标题和描述中提到的"IE6中的position:fixed定位兼容性写法"，实际上是一种利用JavaScript和CSS hack来模拟`position:fixed`效果的方法。下面，我们将详细探讨这些技术： 1. **HTML和CSS Hack**： 由于IE6的特性...

    IE6下position fixed失效的解决方法(亲测有效)

    // 如果是IE6，使用expression模拟fixed定位 if (isIe6) { objThis.css('position', 'absolute'); domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"');...

    ie6下实现position:fixed效果实例介绍

    对于其他主流浏览器，我们只需设置`position:fixed`，但为了兼容IE6，我们需要采用一些特殊技巧。 首先，`_position:absolute;`和`_top:expression(eval(document.documentElement.scrollTop));`是专门为IE6设计的...

    css expression使用概述及其优缺点介绍

    对于IE6的`position:fixed`兼容性问题，可以通过JavaScript检测并动态更新元素的样式，以避免CSS Expression带来的性能损失和抖动问题。这种方法虽然可能需要更多的代码，但能提供更好的性能和安全性。 总的来说，...

    JS解决position:sticky的兼容性问题的方法

    它是一个CSS定位方法，旨在解决相对定位（relative）和固定定位（fixed）在某些情况下使用上的不便。position:sticky结合了两者的特性：当元素在屏幕内滚动时，它表现为相对定位；而当它即将滚出屏幕时，则变为固定...

    AlertBox 弹出层信息提示框效果实现步骤

    以下是一个兼容IE6的`fixed`定位示例： ```html &lt;!DOCTYPE html&gt; body { _background: url(about:blank) fixed; } .fixable { position:fixed; top:100px; _position:absolute; _top:expression((document)...

    lightBox 简易的全屏透明遮罩解决方法

    IE6可以通过JavaScript动态调整元素的`top`值来模拟`position:fixed`的效果，但这会导致在滚动时遮罩层抖动，因为每次更新都会重新渲染。为了解决这个问题，我们可以利用IE6的一个特性：当给`html`或`body`标签设置...

    jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

    总结来说，这个知识点涉及到了jQuery的事件监听（`$(window).scroll()`）、CSS定位（`position:fixed/absolute`）、浏览器兼容性问题（尤其是IE6的特性）以及动态调整元素样式的技巧，这些都是前端开发中常见的技术...

Magicbox
Global site tag (gtag.js) - Google Analytics