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

最新推荐文章于 2025-11-12 06:07:39 发布

转载最新推荐文章于 2025-11-12 06:07:39 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webDevelop/archive/2012/03/26/2418260.html

本文介绍了一种不依赖CSS Hacks的浏览器兼容性方案，通过使用IE条件注释为不同版本的IE浏览器提供特定样式，同时保持对现代浏览器的良好支持。

<!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 的样式 */
}

转载于:https://www.cnblogs.com/webDevelop/archive/2012/03/26/2418260.html

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

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