一般情况下的浏览器兼容需要考虑 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. Codeforces Round #315 (Div. 1) A. Primes or Palindromes? 暴力

    A. Primes or Palindromes?Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3261 ...

  2. key 限制字符的输入

    //限制字符的输入 { 只能输入以下字符 } procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);begin  If (Key ...

  3. C++11 新特性之 Lambda表达式

    lambda表达式能够用于创建并定义匿名的函数对象,以简化编程工作 Lambda的语法例如以下: [函数对象參数](操作符重载函数參数)->返回值类型{函数体} []内的參数指的是Lambda表 ...

  4. xcode 3.x版本中的Executables 到xcode 4.x中怎么找不到了？

    转自:http://zhidao.baidu.com/question/327868169.html 1 在Scheme处选择Edit Scheme 2 点击Run(Debug) 3 在Argumen ...

  5. MYSQL查询今天昨天本周本月等的数据

    mysql查询本季度 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT *FROM表名WHERE TO_DAYS ...

  6. Android检测是否安装了指定应用

    检测是否安装了指定应用的方法如下: private boolean isAvilible( Context context, String packageName ) { final PackageM ...

  7. AT-PagerAdapter

    关于PagerAdapter的粗略翻译 英文版api地址:PagerAdapter(自备梯子) PagerAdapter         已知直接子类:FragmentPagerAdapter.Fra ...

  8. SQL Server 通配符 Wildcard character

    SQL Server 通配符 Wildcard character %        任意长度的字符串,如:'%computer%' _        单个字符,如:'_ean' []        ...

  9. Linux下配置Node环境变量及问题详解

    这是之前在Linux下配置Node环境变量时踩过的坑,今天又有小伙伴询问这个问题,因此记录下来,不仅是给新童鞋们一些参考,也方便日后查阅 在这之前,相信都已经安装好了,没安装的可以查看博主另一篇文章 ...

  10. javaweb学习总结八(xml约束DTD)

    一:XML约束概念 xml约束:可以编写一个文档来约束xml文件的书写规范. xml语言格式比较严谨,不可能让程序员随意编写,所以必须要有约束. 二:常用的xml约束技术 1:DTD,document ...