内部div全屏遮罩的问题

最新推荐文章于 2024-04-19 22:31:37 发布

mygod0218

最新推荐文章于 2024-04-19 22:31:37 发布

阅读量519

点赞数

分类专栏：前端开发文章标签： div class html 浏览器 ie 测试

本文链接：https://blog.csdn.net/mygod0218/article/details/7692163

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

内部div全屏有三个因素会导出无法全屏：

其直系父节点的overflow必须是visible或者不配置。当overflow为auto时。浏览器的理解是不同的，IE认为内部所有的节点只要溢出都应该显示滚动条。谷歌及火狐认为内部除了绝对定位以外的所有节点溢出时才应该显示滚动条。
其直系绝对定位的父节点是否配置z-index，IE下必须配置，谷歌及火狐下无所谓。
其直系父节点中有relative相对定位，则其全屏时的top、left的计算方式应该依照该节点计算。

下面是一个测试例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>overflow test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style>
			*{margin:0px;padding:0px;font-size:9pt;font-family:monospace,Courier,"Courier New";}
			.superDiv{position:absolute;top:10px;left:20px;width:150px;height:70px;line-height:20px;text-align:center;background:#FF80C0;z-index:3;overflow:visible;}
			.super2Div{position:absolute;top:10px;left:180px;width:150px;height:70px;line-height:20px;text-align:center;background:#FF8080;overflow:visible;}
			.subDiv{margin:0px auto;width:130px;height:40px;background:#DDFFFF;overflow:visible;}
			.throughDiv{position:absolute;top:30px;left:-10px;width:330px;height:20px;line-height:20px;background:#44C2FF;z-index:3;overflow:hidden;}
		</style>
	</head>
	<body>
		<div class="superDiv">
			super
			<div class="subDiv">
				<div class="throughDiv">
					inside div through all div
				</div>
			</div>
		</div>
		<div class="super2Div">
			super's brothers
			<div class="subDiv"></div>
		</div>
	</body>
</html>

mygod0218

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内部div全屏遮罩的问题

内部div全屏有三个因素会导出无法全屏：其直系父节点的overflow必须是visible或者不配置。当overflow为auto时。浏览器的理解是不同的，IE认为内部所有的节点只要溢出都应该显示滚动条。谷歌及火狐认为内部除了绝对定位以外的所有节点溢出时才应该显示滚动条。其直系绝对定位的父节点是否配置z-index，IE下必须配置，谷歌及火狐下无所谓。其直系父节点中有relative相
复制链接

扫一扫