`

ie 怪异模式下 position fixed javascript 实现

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
修改的页面文档类型竟然定义成这个,我太无语了。
好多属性什么的都不对,我太郁闷了。为了实现 position fixed 效果只能写了下面的代码 - -。

var isIE=!!window.ActiveXObject;
if (isIE) {
	document.getElementById('notice').style.position = 'absolute';
	tValue = 260;
	if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		hWindow = document.documentElement.clientHeight;
	}else {
		hWindow = document.body.clientHeight;
	}
	window.onscroll = function(){
		var el = document.getElementById('notice');
		if (document.body && document.body.scrollTop)
		{
			//top=document.body.scrollTop;
			//left=document.body.scrollleft;
			if (!isNaN(document.body.scrollTop)) {
				//var h = hWindow + document.body.scrollTop - 210;
				el.style.top = (hWindow + document.body.scrollTop - tValue) +"px";
			}
			//console.log('body: '+ document.body.scrollTop);
			//console.log('bottom: '+ el.style.bottom);
		}
		if (document.documentElement && document.documentElement.scrollTop)
		{
			//top=document.documentElement.scrollTop;
			//left=document.documentElement.scrollLeft;
			if (!isNaN(document.documentElement.scrollTop)) {
				el.style.top = (hWindow + document.documentElement.scrollTop - tValue) +"px";
			}
			//console.log('documentElement: '+ document.documentElement.scrollTop);
		}
		//el.style.top = (document.documentElement.scrollTop + 10)+"px";
	}
}
分享到:
评论

相关推荐

    IE6浏览器不支持固定定位(position:fixed)解决方案

    IE6以及其他一些旧版本的浏览器,比如IE7和IE8,在文档处于怪异模式(quirk mode)时,会将position: fixed视为错误值,并将其忽略。这会导致使用了position: fixed的元素被当作静态(static)定位来处理,这意味着...

    IE6 -- IE8浏览器CSS兼容性查询手册【gif格式】

    使用`position: fixed;`在IE6中无效,需要使用技巧如`expression`脚本或JavaScript替代。 6. CSS3新特性:IE6-8对CSS3的新特性如圆角(border-radius)、阴影(box-shadow)、渐变(gradients)和过渡(transitions...

    Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

    - ***patMode判断**:文档的`compatMode`属性用于检测浏览器是否处于标准模式或怪异模式。在本例中,通过`document.documentElement.className="hScroll";`来设置页面的滚动行为。在不兼容的浏览器中,这段代码可能...

    javascript面试题

    - **position 值**:`static`, `relative`, `absolute`, `fixed`, `sticky`。 - **定位原点**:`relative` 基于自身位置,`absolute` 基于最近的非 static 定位祖先。 **53、absolute 的 containing block 计算方式...

    WebRebuild北京第一届交流会之2:《浏览器兼容性问题简介》——黄昊

    显示问题通常涉及到CSS的兼容性,例如height/width的处理、position:fixed的实现,以及浮动元素(float)和文本对齐(text-align)在不同浏览器中的表现。脚本问题则聚焦于JavaScript的兼容性,比如DOM操作、Date....

    【JavaScript源代码】教你javascript如何获取指针的位置.docx

    所以我们需要结合`document.documentElement.scrollLeft`和`document.documentElement.scrollTop`(对于标准模式)或`document.body.scrollLeft`和`document.body.scrollTop`(对于怪异模式)来计算。这些属性分别...

    qq浮动代码

    5. **DOCTYPE声明**:正确的DOCTYPE声明可以帮助浏览器以标准模式解析页面,减少IE6/7的怪异模式(Quirks Mode)问题。 6. **JavaScript/jQuery**:如果需要更复杂的交互,如点击弹出聊天窗口,可能需要使用...

    针对IE6的一些CSS Hack编写时的注意点小结

    - 在Quirks Mode(怪异模式)下,IE6使用的是自己的盒子模型,其中元素的宽度包括内容宽度、内边距、边框宽度,而不包括外边距。这意味着盒模型的计算方式与W3C标准不同,导致布局时需特别考虑这一差异。 以上知识...

    ExtAspNet_v2.3.2_dll

    -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...

    跨浏览器兼容性问题.docx

    IE6和IE7采用的是"怪异盒模型",其中边框和内填充被添加到了元素的总宽度和高度中,而其他现代浏览器遵循W3C标准的盒模型,将它们计算在内容区域之外。因此,为了确保元素在所有浏览器中正确对齐,通常需要初始化`...

    前端面试宝典(前端知识)

    - **标准模式与怪异模式**:标准模式遵循W3C规范,怪异模式遵循旧的Quirksmode标准,主要由doctype声明决定。 - **XHTML与HTML的区别**:XHTML是XML的子集,语法更严格,所有元素必须闭合,属性值需加引号。 - **...

    前端面试宝典.docx

    - 浏览器标准模式遵循W3C标准,怪异模式遵循旧的IE盒模型,导致样式渲染差异。 - XHTML与HTML的区别在于XHTML是XML的子集,语法更严格,要求所有标签闭合,属性值必须用引号括起。 - `data-`前缀用于自定义数据...

    5月最新大厂前端高频核心面试题.pdf

    浏览器标准模式和怪异模式之间的区别主要在于对CSS解析的不同,标准模式尽可能地遵循标准,而怪异模式是为了保持早期浏览器的兼容性而采用的一套解析规则。 渐进增强(progressive enhancement)和优雅降级(graceful ...

    web前端面试题

    - **position** 的值包括 `static`, `relative`, `absolute`, `fixed`, `sticky`。 - `relative` 定位元素相对于其原始位置移动。 - `absolute` 定位元素相对于最近的已定位祖先元素进行定位。 **50. absolute 的 ...

    WEB基础_CSSDIV

    默认盒模型(W3C标准)和IE盒模型(怪异模式)在边框和内边距的计算上有所不同。 4. **定位机制**:CSS提供了相对定位、绝对定位、固定定位等,用于控制元素在页面上的位置。其中,`position: relative`相对于元素...

    2024年最新前端面试题总结(HTML5+CSS3+JS+TS4+Vue+React18)

    当网页缺少文档类型声明时,浏览器可能会进入“怪异模式”(Quirks Mode),在这种模式下,浏览器会采用一种向后兼容的方式来渲染页面,这可能导致布局和样式出现问题。因此,在开发过程中,总是推荐使用正确的文档...

    尚硅谷_前端_面试题

    7. **实现不使用border画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。** - 可以通过设置相邻元素的背景色差异来实现这一效果。例如,上一个元素设置底部背景色,下一个元素设置顶部背景色...

    reform

    5. **定位**:CSS提供了相对定位(`position: relative`)、绝对定位(`position: absolute`)、固定定位(`position: fixed`)和静态定位(`position: static`),以控制元素在页面上的位置。 6. **Flexbox布局**...

Global site tag (gtag.js) - Google Analytics