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

谁践踏了优雅 2022-06-16 11:22 241阅读 0赞

\#**兼容问题目录**

1、IE6下怪异盒模型  
2、IE6下最小高度问题  
3、IE6下不支持1px的点线  
4、IE6下内容会把父级的高度撑开  
5、IE6下只支持给a标签添加伪类  
6、IE67下不支持给块标签加display:inline-block  
7、IE8以及IE8以前的浏览器都不支持opacity

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

[http://blog.csdn.net/baidu\_37107022/article/details/71973570][http_blog.csdn.net_baidu_37107022_article_details_71973570]

[http://blog.csdn.net/baidu\_37107022/article/details/71977053][http_blog.csdn.net_baidu_37107022_article_details_71977053]

--------------------

\#1、IE6下怪异盒模型  
**在标准模式下的盒模型，**

盒子总宽度/高度=width/height+padding+border+margin

**在怪异模式下的盒模型，**

盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，
    
    盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

**解决办法**  
在css3中有一个属性box-sizing来处理是用何种模型进行解析。

box-sizing有两个值一个是**content-box**，另一个是**border-box**。

当设置为box-sizing:content-box时，将采用**标准模式**解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用**怪异模式**解析计算；

**目前使用此属性需要前缀如下:**

> \-webkit-box-sizing: content-box;  
> \-moz-box-sizing: content-box;

**代码演示**

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				width: 100px;
    				height: 100px;
    				border: 10px solid #000;
    				padding: 10px;
    				background: red;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div>123</div>
    	</body>
    </html>

**什么是盒模型链接：[http://blog.csdn.net/baidu\_37107022/article/details/71272900][http_blog.csdn.net_baidu_37107022_article_details_71272900]**

\#2、IE6下最小高度问题

**解决办法**  
1、overflow:hidden 推荐  
2、font-size: 0;

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				height: 1px;
    				background: red;
    				/*font-size: 0;*/
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div></div>
    	</body>
    </html>

\#3、IE6下不支持1px的点线

**解决办法：**  
IE6不支持一像素的点划线，用背景图代替

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				width: 500px;
    				height: 100px;
    				border: 1px dotted #f00;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div></div>
    	</body>
    </html>

\#4、IE6下内容会把父级的高度撑开

**解决办法**  
overflow: hidden;

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				width: 200px;
    				height: 200px;
    				border: 1px solid #000;
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div>
    			这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊
    		</div>
    	</body>
    </html>

\#5、IE6下只支持给a标签添加伪类

IE6不支持除了a标签以外标签的伪类—无法解决

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			a:hover{
    				color: #f00;
    			}
    			div{
    				width: 100px;
    				height: 100px;
    				background: red;
    			}
    			div:hover{
    				background: green;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<a href="#">kaivon</a>
    		<div></div>
    	</body>
    </html>

\#6、IE67下不支持给块标签加display:inline-block

**无法解决**

\*\*根本原因：\*\*IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			span,div{
    				width: 100px;
    				height: 100px;
    				background: red;
    				display: inline-block;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div>kaivon1</div>
    		<div>kaivon2</div>
    		<span>kaivon1</span>
    		<span>kaivon2</span>
    	</body>
    </html>

**普通浏览器中效果**

![这里写图片描述][SouthEast]

**IE7中效果**

![这里写图片描述][SouthEast 1]

\#7、IE8以及IE8以前的浏览器都不支持opacity

**解决办法**  
用filter

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				width: 100px;
    				height: 100px;
    				background: red;
    				opacity: 0.5;
    				filter:alpha(opacity=50);
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div>kaivon</div>
    	</body>
    </html>

[http_blog.csdn.net_baidu_37107022_article_details_71973570]: http://blog.csdn.net/baidu_37107022/article/details/71973570
[http_blog.csdn.net_baidu_37107022_article_details_71977053]: http://blog.csdn.net/baidu_37107022/article/details/71977053
[http_blog.csdn.net_baidu_37107022_article_details_71272900]: http://blog.csdn.net/baidu_37107022/article/details/71272900
[SouthEast]: /images/20220616/fe2c26ed77d0465da65e963cdf061f9e.png
[SouthEast 1]: /images/20220616/d1812883d8bc43a89eea7309f8566b89.png