一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本，当然在 IE9 开始逐步推向市场后，又会有更多的衍生版本。所以我目前只考虑 IE7~9 版本的兼容情况。涉及到的条件注释代码如下：

<!DOCTYPE html>

<!--[if lt IE 7 ]><html><![endif]-->

<!--[if IE 7 ]><html><![endif]-->

<!--[if IE 8 ]><html><![endif]-->

<!--[if IE 9 ]><html><![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

使用说明如下：

.test {

    /* 针对非 ie 浏览器的样式 */

}

.ie .test {

    /* 针对所有 ie 版本的样式 */

}

.ie6 .test {

    /* 针对 ie6 的样式 */

}

...

.ie9 .test {

    /* 针对 ie9 的样式 */

}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

原文：http://www.mangguo.org/after-abandoning-css-hacks-browser-compatible-solution/

抛弃 CSS Hacks 后的浏览器兼容方案的更多相关文章

  1. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  2. 怎么用css hack处理各浏览器兼容IE6，IE7,IE8,IE9/ FF

    第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...

  3. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  4. IE浏览器兼容方案

    1.使用高版本渲染模式 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 2.css hack (1)条件注释 ...

  5. jQuery-1.9.1源码分析系列（七） 钩子（hooks）机制及浏览器兼容

    处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...

  6. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  7. HTML5前端性能优化——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  9. CSS在不同浏览器兼容问题,margin偏移/offset溢出等

    margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. 自己写一个jQuery垂直滚动栏插件（panel）

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  2. Android Activity切换动画overridePendingTransition

    Activity在切换或者是退出的时候能够使用渐入,滑动,缩放等动态效果.使用的就是方法overridePendingTransition,能够直在Activity其中直接调用. overridePe ...

  3. BZOJ 1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 筛法

    1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lyds ...

  4. alternatives命令使用方法

    alternatives命令使用方法 alternatives是Linux下的一个功能强大的命令.仅仅能在root权限下运行.如系统中有几个命令功能十分相似,却又不能任意删除,那么能够用 altern ...

  5. C++技术问题总结-第12篇 设计模式原则

    设计模式六大原则,參见http://www.uml.org.cn/sjms/201211023.asp. 1. 单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类仅仅负责一项职责 ...

  6. 使用sql生成UUID

    在SQLServer中使用该sql语句可以生成GUID:select cast(NEWID() as varchar(36)) as uuid 通过一下语句将GUID中的'-'字符去掉: select ...

  7. java源码部署

    环境:nginx+tomcat部署方式:源码部署源码目录 /chroot2/test/schedule 目录下面就是所有源码了tomcat 位置: /usr/local/tomcat/apache-t ...

  8. [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

    By default, Angular provides a lot of debug information on the DOM that's only necessary for tools l ...

  9. stl 容器

    10.1.2.2容器的分类 序列式容器(Sequence containers) 每个元素都有固定位置--取决于插入时机和地点,和元素值无关. vector.deque.list  关联式容器(Ass ...

  10. 详解SQL Server连接（内连接、外连接、交叉连接）

    在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...