【CSS笔记之六】filter滤镜在IE浏览器失效的原因、Chrome不认document.documentElement.scrollTop的解决方法

一、filter滤镜在IE浏览器失效的原因及其解决方法

在项目后期补充交互效果的时候，发现有时候filter滤镜在IE浏览器下会失效。用IE Developer Toolbar检查测试后发现hasLayout 属性值为0。说明造成此现象的原因依然是IE的Layout没有被触发。

触发IE Layout的方式很多，比如display：inline-block;width/height:除auto外任意值;position:absolute/relative;zoom:非零值;float:left/right;等等。

这里采用设置宽高的方式：

.appname a{
	border:1px solid #f5d29c;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;/*Note: Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity.*/
	opacity:0.8;	
	/*for IE :wayto trigger IE layout:convert to block element，and then define block size*/
	display:block;
	width:130px;
	height:70px;
}
.appname a:hover{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity:1;
}

加上宽高属性后，上述代码在IE下表现正常。使用开发调试工具IE Developer Toolbar查看，发现hasLayout属性值变为-1即为true。

二、谷歌Chrome浏览器下document.documentElement.scrollTop取值异常的解决方法

使用jquery.scrollTop插件实现“滚动到顶部”的功能，发现某些情况下Chrome不认document.documentElement.scrollTop，使用alert取到的值始终是零。需要通过js进行处理，修复这个bug。

实例html代码：

<div class="toTop">
	<a id="define" href="#top" title="返回顶部" hidefocus="true" style="display:none;"></a>
</div>

对应的css为：

.toTop{
}
.toTop a{

	display:block;
	height:165px;
	width:216px;
	background:url("../img/20120417/gototop.png") no-repeat scroll 0 0 transparent;
	position:fixed;
	top:70%;
	right:1%;
	/*IE6 下position:fixed;无效的解决*/
	_position:absolute;
	_top:expression(documentElement.scrollTop + 350 + "px");
	cursor:pointer;
	opacity:0.8;
	/*解决IE6下png24背景不透明*/
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="img/20120417/gototop.png");
}

.toTop a:hover{
	opacity:1;
}

解决chrome下问题的方法是转而通过document.body.scrollTop获取需要的值，代码：

$(function(){
	$(window).scroll(function () {
		var scroll_top;
		if (document.documentElement && document.documentElement.scrollTop) {
			scroll_top = document.documentElement.scrollTop;
		}
		else if (document.body) {
			scroll_top = document.body.scrollTop;/*某些情况下Chrome不认document.documentElement.scrollTop则对于Chrome的处理。*/
		}		
		if(scroll_top > 100){
			$('#define').css("display","block");

		}
		else{
			$('#define').css("display","none");
		}

	});

	$('#define').scrollTop({
		'scrollAnimation': 'true',
		'speed': 'define'
	});

});

到此，兼容性搞定。今天是五四青年节，放假半天，总结了半个下午，写了半个下午博客，充实的一天结束了！