IE6/7/8/9/10简单css Hack

最新推荐文章于 2022-04-07 17:03:37 发布

zryxzm

最新推荐文章于 2022-04-07 17:03:37 发布

阅读量193

点赞数 1

本文链接：https://blog.csdn.net/CSDNBegins/article/details/107128837

版权

css Hack IE6/7/8/9/10 Hack分别是什么
解释：css hack
*不同的浏览器、或者说同一浏览器的不同版本对css的支持不同
*利用这种不同，使得同一段代码可以在不同的浏览器上都能得到正确的展现
1、条件注释Hack
2、属性前缀Hack
3、选择器前缀Hack

第一种：条件注释Hack
html代码

        <!--[if  IE  6]>
		    <p>这里的代码只会出现在IE6中</p>
		<![endif]-->
		
		<!--[if  IE  8]>
		    <p>这里的代码只会出现在IE8中</p>
		<![endif]-->
		
		<!--[if  lte IE  8]>
		    <p>这里的代码只会出现在IE8及以下中</p>
		<![endif]-->

gt 大于 gte 大于等于
lt 小于 lte 小于等于
！不等于

第二种：属性前缀Hack

div {
	width: 100px;
	height: 100px;
	/* 表示缺省显示 */
	background-color: #f00;
	/* IE8显示为绿色  使用：\0   支持IE 8/9/10/11 */
	background-color: #0f0\0;
	/* IE9显示为蓝色  使用：\9\0 支持IE 9/10/11*/
	background-color: #00f\9\0;
	/* IE7显示为黑色  使用：*    支持IE 6/7 */
	*background-color: #000;
	/* IE6显示为黄色  使用：_    支持IE 5/6 */
	_background-color: #ff0;
}

第三种：选择器前缀Hack

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		
			html div{
				width: 100px;
				height: 100px;
				/* 缺省显示 */
				background-color: #f00;
			}
			*html div{
				/* IE6显示为绿色 使用：*html 支持：IE6 */
				background-color: #0f0;
			}
			*+html div{
				/* IE7显示为蓝色 使用：*+html 支持：IE7 */
				background-color: #00f;
			}
			@media \0screen {
				#div1{
					/* IE8显示为黑色 使用：@media \0secreen 支持：IE8 */
					background-color: #000;
				}
			}
			@media screen and (min-width:0){
				#div1{
					/* IE9\10显示为黄色 使用：@media screen and (min-width:0\0) 支持：IE9\10 */
					background-color: #ff0;
				}
			}
			@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
				#div1{
					/* IE10+ 显示为豆沙色 使用：@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) 支持：IE10+ */
					background-color: #bfa;
				}
			}
			
		</style>
	</head>
	<body>
		<!--[if  IE  6]>
		    <p>这里的代码自会出现在IE6中</p>
		<![endif]-->
		
		<!--[if  IE  8]>
		    <p>这里的代码自会出现在IE8中</p>
		<![endif]-->
		
		<!--[if  lte IE  8]>
		    <p>这里的代码自会出现在IE8及以下中</p>
		<![endif]-->	
				
		<div id="div1"></div>
	</body>
</html>