WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】

最新推荐文章于 2024-08-13 14:38:53 发布

Java仗剑走天涯

最新推荐文章于 2024-08-13 14:38:53 发布

阅读量6.6k

点赞数 1

分类专栏：前端基础HTML5/CSS3 文章标签：浏览器兼容性 css样式 css样式兼容问题

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71977053

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

#兼容问题目录

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
17、IE6下同一层级的浮动元素会盖住绝对定位元素
18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
20、IE67下输入类型的表单控件，上下两边各有1px的间隙
21、IE8以及IE8之前不识别H5标签
22、IE6不支持png透明图片

后续兼容性问题处理链接地址

http://blog.csdn.net/baidu_37107022/article/details/71972223

http://blog.csdn.net/baidu_37107022/article/details/71973570

#16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法
给父级也加相对定位

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				border: 5px solid #f00;
				overflow: hidden;
				position: relative;
			}
			#box div{
				width: 300px;
				height: 300px;
				background: green;
				position: relative;
			}
		</style>
	</head>
	<body>
		<!--
			IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
			解决办法
				给父级也加相对定位
		-->
		<div id="box">
			<div></div>
		</div>
	</body>
</html>

#17、IE6下同一层级的浮动元素会盖住绝对定位元素

解决办法
给定位元素外面嵌套一个层

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				border: 5px solid #f00;
				position: relative;
			}
			.box div{
				width: 150px;
				height: 150px;
				background: green;
				float: left;
				display: inline;
				margin-left: 50px;
			}
			span{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<!--
			IE6下同一层级的浮动元素会盖住绝对定位元素
			解决办法
				给定位元素外面嵌套一个层
		-->
		<div class="box">
			<div></div>
			<!--<span>kaivon</span>-->
			<p><span>kaivon</span></p>
		</div>
	</body>
</html>

#18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

无法解决

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				border: 10px solid #f00;
				position: relative;
			}
			.box div{
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				right: -10px;
				bottom: -10px;
				/*left: -10px;
				top: -10px;*/
			}
		</style>
	</head>
	<body>
		<!--
			在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
		-->
		<div class="box">
			<div></div>
		</div>
	</body>
</html>

#19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

解决方法
给元素添加相对定位，或者给父级overflow:hidden;

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid #f00;
			}
			.box div{
				width: 100px;
				height: 100px;
				background: green;
				margin: -10px 0 0 -10px;
			}
		</style>
	</head>
	<body>
		<!--
			IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
			解决方法
				给元素添加相对定位，或者给父级overflow:hidden;
		-->
		<div class="box">
			<div></div>
		</div>
	</body>
</html>

#20、IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法
给控件加浮动

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 1px solid #f00;
				overflow: hidden;
				zoom: 1;
			}
			div input{
				float: left;
			}
		</style>
	</head>
	<body>
		<!--
			IE67下输入类型的表单控件，上下两边各有1px的间隙
			解决办法
				给控件加浮动
		-->
		<div>
			<input type="text" />
		</div>
	</body>
</html>

#21、IE8以及IE8之前不识别H5标签

无法解决

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.createElement('header');
			document.createElement('nav');
		</script>
		<script src="js/html5shiv.min.js"></script>
		<style>
			header{
				width: 100px;
				height: 100px;
				background: red;
				/*display: block;*/
			}
			nav{
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<!--
			IE8以及IE8之前不识别H5标签
			
		-->
		<header>头部</header>
		<nav>导航</nav>
	</body>
</html>

#22、IE6不支持png透明图片

使用插件
这里写图片描述

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/DD_belatedPNG_0.0.8a.js"></script>
		<script>
			DD_belatedPNG.fix('img,div');
		</script>
		<style>
			body{
				background: #ccc;
			}
			div{
				width: 300px;
				height: 300px;
				background:url(img/1.png);
			}
		</style>
	</head>
	<body>
		<!--
			IE6不支持png-24透明图片
		-->
		<img src="img/1.png"/>
		<div></div>
	</body>
</html>

导入插件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/DD_belatedPNG_0.0.8a.js"></script>
		<script>
			DD_belatedPNG.fix('body');
			/*
			 * 这个插件不支持body的背景
			 */
		</script>
		<style>
		/*
		 * 用滤镜的话就必需给body高度
		 */
			body{
				height: 500px;
				background: #ccc url(img/1.png) no-repeat;
				_background-image:none;
				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");
			}
			
		</style>
	</head>
	<body>
	</body>
</html>