浏览器一多,问题就多,现在IE7也出来,我又多了一个要考虑的浏览器
IE7与IE6相比还是有很大的区别的,跟FF也有不一样的地方
在这里先不讲有哪些区别,主要来讲如何解决这些问题
放在以前都是用CSS Hack来解决IE6以下(包括IE^)以及Firefox(下面简称FF)的问题
例:


div.content {
width:300px !important; //大部分支持!important标记的浏览器使用这里的数值
width /**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，FF也一样支持/**/,所以他读到的也是width的值是400px
}

由于大部分用的就是IE6还有FF,所以这两个区别,我在写页面的时候,主要用来兼容IE和FF.

可是前两天发现,IE7可以解析width /**/:400px;这样就完蛋了
我为FF写的,IE7不是也能读到了,那要怎么办呢
Conditional Comments
这个微软定义的东东就是今天我想说的主角-----IE的条件注释，它既区别IE和非IE，又区别不同版本的IE。这样，将 word-wrap 之类的定义放在这个条件判断内，既不影响显示又可以规范CSS的合法性，爽！其实，依我看，它的应用远不止于CSS……
条件注释是只能在IE下使用，因此我们可以通过条件注释来为IE添加特别的指令。
条件注释从IE5开始被支持，它可能在IE5.0,5.5,6,7里有区别。
比如,你可以在页面顶部写:


<!--[if lt IE 6]>
<style>
.logo {
 margin-left: 10px;
}
</style>
<![endif]-->

这样就只有IE6可以识别了~
在写条件注释有下面几点要注意的
1.条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3.条件注释使用的是HTML的注释结构，因此他们 只能使用在HTML文件里，而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css里。但是很不幸的是，这看起来不太可能。我也试过根据条件注释，使用<link>来导入一个额外的样式表，但是因为我只需要一个额外的样式规则，这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外的样式，那么使用<link>或许是一个好的方法。
就象这样：


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

For IE：


<!--[if IE]> Only IE <![endif]-->
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
<!--[if lt IE 6]> Only IE 6- <![endif]-->
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

For Non-IE：
在注释中嵌套注释，这样首尾还原为两个注释，所以非IE浏览器可以显示中间的内容；而IE识别到“!IE”，所以将整个语句当成否定条件判断而不显示中间的内容。利用这样的用法即可在非IE中应用 Conditional Comments，酷！


[color=#8B0000]<!--[if !IE]><!--> COOL!!! Non-IE <!--<![endif]-->[/color]
<!--[if IE 6]><!--> IE6 Or Non-IE <!--<![endif]-->

说明：


gt: greater than，选择条件版本以上版本，不包含条件版本
lt: less than，选择条件版本以下版本，不包含条件版本
gte: greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
!: 选择条件版本以外所有版本，无论高低

注意：
将以上语法加在 IE 前，在 IE 后加上具体的版本号，注意如果写成“IE 5”则表示为IE5到IE6之间的所有版本的IE5系列，如果写成“5.0”则包括5.0、5.01等版本，不包括5.5，以此类推。

说了这么多,那最后怎么来解决IE6/IE7/FF的兼容性的问题呢
假设他们三个的数值都不一样
可以这样


<style>
.logo{
   width:400px;  //这句所有浏览器都可以读到,包括FF
}
</style>
<!--[if gte IE 5]>
<style>
.logo{
    width:300px; //我句包括IE5在内的IE以上版本都可以读到
}
</style>
<![endif]-->
<!--[if IE 7.0]>
<style>
.logo{
 width:350px; //这句就只有IE7可以读到
}
</style>
<![endif]-->

根据先后,后面的定义可以覆盖前面的定义
所以得出这样的结果
在FF下读到的是  width:400px;
包括IE5在内的IE以上版本读到   width:300px;
而IE7虽然也可以读到前两句,但被最后一句width:350px; 覆盖,所以读到的是width:350px;

CSS Hacks / Conditional Comments For IE相关推荐

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

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

  2. 浏览器的CSS Hacks

    LZ注:此文原作者是:Paul Irish(Google的前端开发工程师),本文是原文的部分译文. 我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签. 但是,我想 ...

  3. 防御 CSS 黑客——介绍“安全的 CSS hacks”

    我们如何在 CSS 中定位 Internet Explorer? 你使用 CSS hacks.条件样式表或其他东西吗? 关于这个已经有很多讨论了,我并不是要开始一个新的讨论. 每个人都有权发表自己的意 ...

  4. css hacks (ie6,ie7,ie8,firefox,Chrome)

    IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_", IE8能识别" ...

  5. IE条件注释和CSS Hacks

    http://blog.moocss.com/code-snippets/html-css-code-snippets/1130.html/comment-page-1 转载于:https://www ...

  6. 抛弃 CSS Hacks 后的浏览器兼容方案

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

  7. python足球联赛赛程_足球联赛赛程表生成

    热刺对布莱顿比分 Same time every year around the end of march or so I always start thinking about summer and ...

  8. 纯CSS无hacks的跨游览器多列布局(转)

    转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...

  9. 纯CSS无hacks的跨游览器多列布局

    利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...

  10. css 小经验： 重构css的优化与技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺 ...

最新文章

  1. strcmp可以比较数组么_6.3 C语言字符数组
  2. 【笔试】：编程实现C++string 类成员函数
  3. 牛客网--蛇形矩阵（Java）
  4. 腾讯的抖音官号被封杀了？抖音回应：谣言
  5. 教练我想学python_教练，我想学Python:（3）列表和切片，边学习边刷leetcode,三,与,边学边,LeetCode...
  6. java调用cmd关闭excel,java 调用 windows 的 cmd 命令
  7. 单链表删除所有值为x的元素_双链表的基本实现与讲解（C++描述）
  8. 静态对象和非静态对象的区别
  9. 高性能迷你React框架anujs1.0.8发布
  10. PostgreSQL usermanual翻译暂停20200420
  11. 海海软件发布动态网站加密(DRM版权保护)Beta版
  12. UOJ#449 喂鸽子
  13. Spring MVC 详细信息讲解资料
  14. 平江南江计算机培训,平江县南江学区： 假期培训促提升，收心归位再出发
  15. 公司 电脑突然 上不去网络 无网络访问
  16. 台式计算机的安装顺序,台式电脑安装系统步骤图 装系统步骤详解
  17. 番茄钟工作法--我们天生爱分享
  18. COMFORT 尊驾 | 内外兼修 全面进化
  19. docker部署apache服务(使用存储卷)
  20. CEF与Off-Screen Rendering与Transparent Background

热门文章

  1. 【优化算法】变异策略的改进型花朵授粉算法【含Matlab源码 480期】
  2. 【三维路径规划】基于matlab改进差分算法多无人机协同三维路径规划【含Matlab源码 169期】
  3. SPSS问卷中的人口学变量是否要用？以及如何选用？【SPSS 065期】
  4. cocos creator 数组_5Cocos Creator 脚本简介
  5. 已知表t est(name)的记录如下, tom tom_green tomly lily 代码select * from test where name rlike ‘tom.*‘的结果有几条记录
  6. 例2.10 查找学生信息 - 九度教程第18题（查找）
  7. ThinkPad笔记本安装win10+Ubuntu17.10双系统
  8. 记一个单双引号的特别用法
  9. java打印jsp_在java中实现对FORM的打印功能
  10. 5个优化页面加载速度提高SEO排名的最佳实践