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

Dear 丶 2022-06-16 11:23 221阅读 0赞

\#**兼容问题目录**  
8、IE6不支持固定定位  
9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙  
10、IE6下双边距问题  
11、IE67下父级有边框，子级有margin的话会不起作用  
12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）  
13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效  
14、IE6下文字溢出的问题  
15、IE67li间隙问题

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

[http://blog.csdn.net/baidu\_37107022/article/details/71972223][http_blog.csdn.net_baidu_37107022_article_details_71972223]

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

\#8、IE6不支持固定定位

可以用js来解决

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				height: 3000px;
    			}
    			div{
    				width: 100px;
    				height: 100px;
    				background: red;
    				/*position: fixed;
    				right: 0;
    				bottom: 0;*/
    				
    				position: absolute;
    				right: 0;
    				top: 0;
    			}
    		</style>
    		<script>
    			window.function(){
    				var div1=document.getElementById("div1");
    				
    				window.onscroll=function(){
    					var top=document.documentElement.scrollTop||document.body.scrollTop;
    					var bottomPos=document.documentElement.clientHeight-div1.offsetHeight;
    					
    					div1.style.top=top+bottomPos+'px';
    				}
    			};
    		</script>
    	</head>
    	<body>
    		
    		<div id="div1">kaivon</div>
    	</body>
    </html>

\#9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

**解决办法**  
给后面元素也添加浮动

**代码演示**

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

\#10、IE6下双边距问题

**解决方法**  
给元素添加display:inline;

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				margin: 0;
    			}
    			span,div{
    				width: 100px;
    				height: 200px;
    				background: red;
    				/*margin-left: 50px;
    				float: left;*/
    				margin-right: 50px;
    				float: right;
    				display: inline;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div></div>
    		
    	</body>
    </html>

\#11、IE67下父级有边框，子级有margin的话会不起作用

**解决办法**  
触发父级的layout

**Layout布局出发方式链接：[http://blog.csdn.net/baidu\_37107022/article/details/71640304][http_blog.csdn.net_baidu_37107022_article_details_71640304]**

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.parent{
    				border: 1px solid #f00;
    				zoom: 1;
    			}
    			.parent div{
    				width: 100px;
    				height: 100px;
    				margin: 100px;
    				background: green;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="parent">
    			<div></div>
    		</div>
    	</body>
    </html>

\#12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

**解决方法**  
用padding解决

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.box{
    				width: 500px;
    				width: 480px;
    				width: 483px;
    				margin: 50px auto;
    				border: 10px solid #000;
    				overflow: hidden;
    				padding-bottom: 10px;
    			}
    			.box div{
    				width: 100px;
    				height: 100px;
    				background: greenyellow;
    				float: left;
    				margin: 10px;
    				margin: 10px 10px 0 10px;
    				display: inline;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="box">
    			<div class="div">1</div>
    		    <div class="div">2</div>
    		    <div class="div">3</div>
    		    <div class="div">4</div>
    		    <div class="div">1</div>
    		    <div class="div">2</div>
    		    <div class="div">3</div>
    		    <div class="div">4</div>
    		    <div class="div">1</div>
    		    <div class="div">2</div>
    		    <div class="div">3</div>
    		    <div class="div">4</div>
    		</div>
    	</body>
    </html>

\#13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

**解决办法：**  
分别包起来，分别设置行高

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			div{
    				height: 300px;
    				line-height: 300px;
    				border: 1px solid #f00;
    			}
    			/*span{
    				height: 100px;
    				background: red;
    				display: inline-block;
    				line-height: 100px;
    			}*/
    			.span1{
    				line-height: 100px;
    				display: inline-block;
    				background: red;
    			}
    			.span2{
    				line-height: 200px;
    				display: inline-block;
    				background: green;
    			}
    		</style>
    	</head>
    	<body>
    		
    		
    		<div>
    			<span class="span1">inlin-block</span>
    			<span class="span2">这是一段文字</span>
    		</div>
    	</body>
    </html>

\#14、IE6下文字溢出的问题

**解决办法**  
1、把注释或者行内元素用div包起来  
3、把父级的宽度加3px

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.wrap{
    				width: 400px;
    				/*width: 403px;*/
    			}
    			.left{
    				float: left;
    			}
    			.right{
    				float: right;
    				width: 400px;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="wrap">
    			<div class="left"></div>
    			
    			<div class="right">这里要多出来一个文字</div>
    		</div>
    	</body>
    </html>

\#15、IE67 li间隙问题

**解决办法**  
1、给li加vertical-align: middle;  
2、给li浮动

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			ul{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    				width: 200px;
    			}
    			li{
    				width: 200px;
    				height: 30px;
    				border: 1px solid #f00;
    				/*vertical-align: middle;*/
    				float: left;
    			}
    			li span{
    				float: left;
    			}
    			li a{
    				float: right;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<ul>
    			<li><span>标题</span><a href="#">更多</a></li>
    			<li><span>标题</span><a href="#">更多</a></li>
    			<li><span>标题</span><a href="#">更多</a></li>
    			<li><span>标题</span><a href="#">更多</a></li>
    		</ul>
    	</body>
    </html>

[http_blog.csdn.net_baidu_37107022_article_details_71972223]: http://blog.csdn.net/baidu_37107022/article/details/71972223
[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_71640304]: http://blog.csdn.net/baidu_37107022/article/details/71640304