WEB前端：瀏覽器（IE+Chrome+Firefox）常見相容問題處理【03】

Java仗劍走天涯發表於2017-05-14
Web前端瀏覽器ChromeFirefox

#相容問題目錄

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>

相關文章