常见浏览器兼容性问题与解决方案

最新推荐文章于 2024-10-08 17:48:41 发布

cquptzsd

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量274

点赞数

分类专栏： CSS 面试文章标签：兼容性 ie6 浏览器面试

本文链接：https://blog.csdn.net/cquptzsd/article/details/77918634

版权

面试同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

对于兼容性问题，就是个不断发现问题、解决问题以及积累的过程。希望以后这篇博客能积累更多的兼容问题。

首先，css hack！

\9 针对所有的IE10及之前

+ * 针对IE7及ie7以下的ie浏览器认识

_ 针对ie6及ie6以下的ie浏览器认识

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:200px;
				height:200px;
				background-color: red;
				background-color: blue\9;
				*background-color: green;
				_background-color: yellow;
			}
		</style>
		<!--
        	\9   针对所有的IE10及之前
			+ *   针对IE7及ie7以下的ie浏览器支持
			_  针对ie6及ie6以下的ie浏览器支持
        -->
	</head>
	<body>
		<div></div>
	</body>
</html>

1、IE9以下浏览器兼容HTML5新增标签

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

2、元素浮动之后，能设置宽高的话就给元素增加宽度。如果需要宽度是由里面的内容撑开，就给它里面的块元素加上浮动；

3、IE6浏览器子级超过父级宽高，父级会被撑大

不要让子级元素的宽高超过父级

4、块元素标签嵌套规则。比如p td h1（2,3,...）标签里面不能嵌套块元素；

5、margin问题

（1）、margin-top传递

（2）、上下margin叠压

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			background-color:green;
			overflow: hidden;
			*zoom:1;
		}
		.item{
			height:50px;
			background-color: red;
			margin-top: 50px;
		}
		.mt100{
			margin-top:100px;
		}
	</style>
	<!-- 
		1、margin-top传递  ==》触发BFC、haslayout ==》
	   	2、同级元素上下margin ==》上下margin叠压
	   	  ==》尽量使用同一方向的margin，比如都设置top或者bottom
   	-->
</head>
<body>
	<div class="box">
		<div class="item"></div>
		<div class="item mt100"></div>
	</div>
</body>
</html>

6、IE6不兼容inline-block问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width:100px;
			height:100px;
			background-color: red;
			/*(inline-block  css2.1   IE6不兼容)*/
			display: inline-block;
			*display: inline;
			*zoom:1;
		}
	</style>
	<!-- 解决方案
		*display: inline;
		*zoom:1;
	 -->

</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

7、IE6最小高度

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			height:1px;
			background-color: red;
			*overflow: hidden;
		}
	</style>
	<!-- 解决方案
		IE6最小高度：16像素
		*overflow: hidden;
	 -->

</head>
<body>
	<div></div>
</body>
</html>

8、文字复制问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.wrap{
			width:400px;
		}
		.left{
			float:left;
		}
		.right{
			width:396px;
			float:right;
		}
	</style>
	<!-- 小尾巴  
		两个浮动之间有注释或者内联元素并且和父级宽度相差不超过3px
		解决方案：
		1、两个浮动元素之间避免出现内联元素或者注释；
		2、与父级宽度相差3px以上
	 -->

</head>
<body>
	<div class="wrap">
		<div class="left"></div>
		<span></span><!--IE下文字溢出bug-->
		<div class="right">↓这是多出来的一只猪</div>
	</div>
</body>
</html>

9、IE6 7父级元素的overflow:hidden是包不住子级的relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:200px;
				height:200px;
				background-color:red;
				border:10px solid black;
				overflow: hidden;
				position:relative
			}
			.content{
				width:400px;
				height:400px;
				background-color:blue;
				position:relative
			}
		</style>
		<!--
        	作者：
        	时间：2017-09-10
        	IE6 7父级元素的overflow:hidden是包不住子级的relative
        	描述：针对ie6 7 给父级元素添加相对定位
        -->
	</head>
	<body>
		<div class="box">
			<div class="content">
				
			</div>
		</div>
	</body>
</html>

10、IE6下绝对定位的子元素，在父级有定位且父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

避免方法：父级元素的宽高不为奇数

11、IE6 下input输入框空隙问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:200px;
				border:1px solid #000;
				background-color: red;
			}
			.box input{
				border:0;
				margin: 0;
				width:200px;
				height:30px;
				background-color: #fff;
				/**float:left*/
			}
		</style>
		<!--
        	描述：ie6下input输入框空隙问题
        	方案：给input元素添加float:left
        -->
	</head>
	<body>
		<div class="box">
			<input type="text" />
		</div>
	</body>
</html>

12、表单控件背景问题

解决方案：设置background-attachment:fixed