透明滤镜导致overflow:visible变为hidden

IE滤镜与布局问题

最新推荐文章于 2025-10-18 15:30:55 发布

最新推荐文章于 2025-10-18 15:30:55 发布 · 288 阅读

文章标签：

#IE #浏览器 #Microsoft #XHTML #HTML

本文探讨了在Internet Explorer浏览器中使用透明滤镜时遇到的布局问题，特别是如何影响`overflow:visible`属性的行为，并对比了与其他现代浏览器的差异。

如下:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<style>
	*{
		margin:0px;
		padding:0px;
	}
	#d01{
		/*IE有滤镜的时候这里会被当作hidden,导致显示区域被剪切,而其它浏览器没有这种情况*/
		/*另外补充一点,在IE下,不触发layout,透明滤镜不会生效*/
		overflow:visible;
		position:absolute;
		background:red;
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
		opacity:0.5;
		width:100px;
		height:100px;
	}
	#d02{
		position:absolute;
	}
</style>
</head>
<body>
	某些情况下,透明滤镜会使overflow:visible变成overflow:hidden,详细如下     (另外,IE下div会向左排列,其余浏览器都是换行...IE真是个奇怪的东西)
	<div id="d01">
		<div id="d02">
			<img src="http://khm2.google.cn/kh/v=41&x=13492&y=6207&z=14&s=Gal">
		</div>
	</div>
</body>
</html>