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

最新推荐文章于 2024-08-02 16:40:39 发布

iteye_19781

最新推荐文章于 2024-08-02 16:40:39 发布

阅读量277

点赞数

文章标签： IE 浏览器 Microsoft XHTML HTML

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下:



<!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>