CSS Hack和CSS Conditional Comments


 如果你的web站点或应用程序是供给不同的浏览器用户使用的,那么你可能就需要使用到CSS Hack和CSS Conditional Comments,本质上CSS Conditional Comments是CSS Hack的一种。如果你的web站点CSS不是特别复杂,用CSS Hack就能够解决浏览器CSS兼容性问题,但是如果你的站点对用户体验要求比较高或者设计非常绚丽,用CSS Conditional Comments(CSS 条件注释)将是你更好的选择。简单的来说,CSS Hack是通过一些特殊的字符来区分IE6/7/8以及Firefox的,CSS Conditional Comments是给不同的浏览器加载不同的CSS文件(当然,这也可以用js来做)。

  一、CSS Hack

  CSS Hack是通过一些特殊的字符来区别IE 6, IE 7, IE 8和Firefox的,浏览器对于不能识别的字符,将会直接过滤掉,有很多字符能够用于CSS Hack,在这里有一个非常详细的列表,下面我只列出了一些比较常用的Hack字符。

  IE6   IE7   IE8   FireFox
  _   √   ×   ×   ×
  *   √   √   ×   ×
  *+ html   ×   √   ×   ×
  !important   ×   √   √   √
  \9   √   √   √   ×
  @import ‘style.css’

  @import “style.css”

  @import url(style.css)

  @import url(‘style.css’)

  @import url(“style.css”)

  √   √   √   √

  1. _    *    \9    !important

  区别Firefox 和 IE 6

view source
print?

1 /*区别Firefox和IE 6*/
2 body{
3     background-color: red;      /*  Firefox */
4     *background-color: yellow;  /*  IE6/7   */
5 }

  区别Firefox 和 IE 7

1 /*区别Firefox 和 IE 7*/
2     body{
3         background: orange;
4         *background: green;
5     }

  区别IE 7 和 IE 6

1     /*区别IE 7 和 IE 6*/
2 /*ie7显示绿色,ie6显示蓝色*/
3 body{
4     background: green !important;
5     *background: blue;
6 }

  区别IE和Firefox

1 /*区别IE和Firefox*/
2     body{
3         background-color: red;      /*  所有浏览器都支持    */
4         background-color: yellow\9; /*  IE6/7/8         */
5     }

  区别FF/IE8/IE7/IE6

1 /*区别IE6/7/8和其他浏览器*/
2 body{
3     background-color: red;      /*  所有浏览器都支持    Firefox显示红色 */
4     background-color: green\9;  /*  IE6/7/8         IE8显示绿色     */
5     *background-color: yellow;  /*  IE6/7           IE7显示黄色     */
6     _background-color: blue;    /*  IE6             IE6显示蓝色     */
7 }

  从上述代码中,可以看出,书写CSS Hack的顺序为Firefox<IE8<IE7<IE6,由高标准向低标准走。
2.关于!important和*+html

  引用:http://www.neoease.com/css-browser-hack/

  优先度: (*+html + !important) > !important > +html

1 #bgcolor {
2     background:red !important; /* Firefox 等其他浏览器 */
3     background:blue; /* IE6 */
4 }
5 *+html #bgcolor {
6     background:green !important; /* IE7 */
7 }

  二、CSS Conditional Comments

  引用:http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/

  http://www.yaosansi.com/post/1000.html

  条件注释包含一些判断,不过这些判断并不是在js中执行,而是在html中执行,使用的方法也非常简单。
1.基本使用方法

1 <!--[if XXX]>
2 这里是正常的html代码
3 <![endif]-->

  2.判断IE浏览器的基本语法

1 <!--[if IE]> / 如果浏览器是IE /
2 <!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
3 <!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
4 <!--[if IE 8]> / 如果浏览器是IE 8 的版本 /

  3.逻辑判断

  逻辑判断并不是很常用,但是其中的”!”常常用于判断非IE浏览器

  lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同

  例句:

1 <!--[if gt IE 6]> / 如果IE版本大于6 /
2 <!--[if lte IE 7]> / 如果IE版本小于等于7 /
3 <!--[if !IE]> / 如果浏览器不是IE /

  4.使用

01 <!-- 默认先调用css.css样式表 -->
02 <link rel="stylesheet" type="text/css" href="css.css" />
03  
04 <!--[if !IE]>
05 <!-- 非IE下调用1.css样式表 -->
06 <link rel="stylesheet" type="text/css" href="1.css" />
07 <![endif]-->
08  
09 <!--[if lt IE 6]>
10 <!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
11 <link rel="stylesheet" type="text/css" href="2.css" />
12 <![endif]-->

01 <!--[if lt IE 7 ]><body class="ie6"><![endif]-->
02 <!--[if IE 7 ]><body class="ie7"><![endif]-->
03 <!--[if IE 8 ]><body class="ie8"><![endif]-->>
04 <!--[if !IE]>--><body><!--<![endif]-->
05  
06 <style type="text/css">
07     body.ie6 .test { background-color: blue }
08     body.ie7 .test { background-color: red }
09     body.ie8 .test { background-color: green }
10 </style>



相关阅读:
刚开始学.Net时写的分页类
Win2003服务器组网、安全管理全攻略一
javascript 面向对象全新理练之数据的封装
CSS 语法 学习css入门者看
Linux操作系统配置Vsftp教程
Ajax令网络更顺滑 微软出招何时
讲解WordPress链接管理功能
LAMP(Linux+Apache+Mysql+PHP)优化技巧
Windows7影响笔记本电脑电池续航时间
javascript eval()用法
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
SQL Server 2008的MERGE语句详细介绍
jQuery源码分析-04 选择器-Sizzle-工作原理分析
ie6使用js支持hover伪类
快速导航

Copyright © 2016 phpStudy |