抛弃 CSS Hacks 后的浏览器兼容方案--转自芒果小站作者 芒果/发布于 2011-11-16 21:27 

<!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6"><![endif]--><!--[if IE 7 ]><html class="ie ie7"><![endif]--><!--[if IE 8 ]><html class="ie ie8"><![endif]--><!--[if IE 9 ]><html class="ie ie9"><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]--><head><meta charset="utf-8"><title>抛弃 CSS Hacks 后的浏览器兼容方案</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link href="/min/b=wp-content/themes/mangguo/css&f=reset.css,example.min.css" rel="stylesheet"><style>
.color {
	background: gray;
	height: 50px;
}
.ie .color {
	height: 100px;
}
.ie6 .color {
	background: red; 
}
.ie7 .color {
	background: yellow; 
}
.ie8 .color {
	background: blue; 
}
.ie9 .color {
	background: green; 
}
</style><body><h1>抛弃 CSS Hacks 后的浏览器兼容方案</h1><h2>利用 IE 条件注释解决多浏览器兼容问题</h2><div class="color">这是一块颜色，高级浏览器呈现灰色，高度为 50 像素。IE 下高度为 100 像素，并且 IE6/7/8/9 分别为红色、黄色、蓝色、绿色。</div></body></html>





*******************一些说明和总结*****************

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

posted @ 2012-03-26 17:34  我的前端笔记  阅读(157)  评论(0)  编辑  收藏  举报