浏览器兼容问题

1 ie 5和6块属性、float、有横向margin时第一个元素横向margin加倍

 比如两个float：left的div左边的那个margin-left加倍：

解决方法：display：inline；

div {

　　 200px;
　　height: 200px;
　　float: left;
　　margin: 0 30px;
　　background-color: aqua;
　　display: inline;//不设置时在ie中第一个div（float：left）的左侧margin加倍

}

2 ie6.0下默认有行高

解决方法：overflow:hidden;或font-size:0;或line-height：xx px；

3 在各个浏览器下img有空隙(原因是：回车。)

解决方法:让图片浮动。

4 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。

解决方法：a 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>}

                  b 父标签添加{overflow：hidden；}

                  c 给父标签设置高度

5 Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果，

/* 最小宽度 */
.min_width{
    min-300px;
    _expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大宽度 */
.max_width{
   max-600px;
   _expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

6 Ie6里面：如li设宽、高，并且li里面的标签浮动，那么li之间会有间距

解决方法：1.li不设宽、高或者li内的标签不浮动

　　　　   2.或者li 设置vertical-align:middle;

7 3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。

   解决方法：用hack技术， 例如：所有浏览器通用 height:100px; 

                                                  ie6专用_height:100px;

                                                  ie7专用*+height:100px; 

                                                  ie6/ie7共用*height:100px;

9 当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。

    解决方法：在行内元素里加入{zoom：1；}

10 当多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

        解决办法：给浮动元素添加display:inline;。

11 opacity 定义元素的不透明度

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
filter:alpha(opacity=50);；/*ie支持该属性*/
opacity:0.5;
-moz-opacity:0.5;

   opacity：0.8；/*支持css3的浏览器*/

12 两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。

13 优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css（一个{}中）属性中，!important不起作用，同一个属性在两个class中是起作用的。

14 火狐不识别background-position-y 或background-position-x;

 

---------------------------2014.01.10补充-------------------------------

15 ie6 不支持 fixed 

/*对于非IE6可以这样写*/
#top{  
    position:fixed;  
    bottom:0;  
    right:20px;  
}  

/*但是IE6是不支持fixed定位的，需要另外重写*/
#top{  
    position:fixed;  
    _position:absolute;  
    top:0;  
    right:20px;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));
}  


/*使用hack使IE6实现该效果，但这个东东会闪烁，需要以下代码*/
*html{  
    background-image:url(about:blank);  
    background-attachment:fixed;  
}  

/*使固定在顶部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));  
}  

/*固定在底部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
}  
/*垂直居中*/
#top{
    position:fixed;
    top:50%;
    margin-top:-50px;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
}

16  解决 ie6 最大、最小宽高 hack方法

/* 最小宽度 */
.min_width{
    min-300px;
    _expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大宽度 */
.max_width{
   max-600px;
   _expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

17  z-index不起作用的 bug

1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签含有浮动(float)属性。
2）所有浏览器：它只认第一个爸爸
层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

　　　#container { position: relative; z-index:30;}   给#box1的父元素设置一个z-index然后与#box2的z-index作比较（实际比较的是父元素）
        #box1 { position: absolute; top: 100px; left: 510px; 200px; height: 200px; background-color: yellow; }
        /*box1有没有z-index都无所谓了，但必须同position（relative或//absolute）使用,就跟一个人生不了孩子一样，需要配合。*/
        #box2 { position: absolute; top: 50px; left: 460px; 200px; height: 200px; background-color: lime; z-index: 20; }

18  ie各个版本hack

/*类内部hack：*/
    .header {_100px;}            /* IE6专用*/
    .header {*+100px;}        /* IE7专用*/
    .header {*100px;}            /* IE6、IE7共用*/
    .header {100px;}        /* IE8、IE9共用*/
    .header {100px9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {330px9;}    /* IE9专用*/

/*选择器Hack：*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/ 

 

1、居中问题

div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto;

2、高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3、clear:both;

不想受到float浮动的，就在div中写入clear:both;

4、IE浮动 margin产生的双倍距离

#box {
float:left;
100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5、padding问题

FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义。

6、div嵌套时 y轴上 padding和 marign的问题

FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7、padding，marign，height，width的傻瓜式解决技巧

注意是技巧，不是方法：
写好标准头
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

8、列表类

1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

9、显示类（display:block,inline）

1. display:block,inline两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
2.鼠标手指状显示
全部用标准的写法 cursor: pointer;

10、背景、图片类

1. background显示问题
全部注意补齐 width，height 属性
2.背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

11、min-height最小高度的实现（兼容IE6、IE7、FF）

作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

12、著名的 Meyer Reset（重置）

CSS reset的作用:让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！如下面常见但事实上极不推荐的代码：*{ margin:0; padding:0; }

这样：

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}  

ol,ul{margin:0; padding:0;}

 

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{ 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 
} 
:focus { 
outline: 0; 
} 
body { 
line-height: 1; 
color: black; 
background: white; 
} 
ol, ul { 
list-style: none; 
} 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
text-align: left; 
font-weight: normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ""; 
} 
blockquote, q { 
quotes: "" ""; 
} 

13、跨浏览器的CSS透明度

.transparent { 
opacity: 0.7; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70); 
-moz-opacity: 0.7; 
-khtml-opacity: 0.7;

14、文字阴影（CSS3）

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

15、Box阴影(CSS3)

.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

16、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)

<div id="wrap"> 
<div id="main" class="clearfix"></div> 
</div> 
<div id="footer"> </div>
CSS:
* { margin:0; padding:0; } 
html, body, #wrap { height: 100%; } 
body > #wrap {height: auto; min-height: 100%;} 
#main { padding-bottom: 150px; } 
#footer { 
position: relative; 
margin-top: -150px; 
height: 150px; 
clear:both;} 
.clearfix:after {content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;} 
.clearfix {display: inline-block;} 
* html .clearfix { height: 1%;} 
.clearfix {display: block;}

17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片

iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
【1】去掉背景色：filter:Chroma(Color=white);
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片：
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor="transparent" style='background:transparent'>

18、为什么web标准中无法设置IE浏览器滚动条颜色了？

原来样式设置：
<style type="text/css">
body{scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
解决办法是将body换成html。

19、为什么中火狐浏览器下文本无法撑开容器的高度？

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }
!important：优先级（除IE6外，都支持）

20、如何定义1px左右高度的容器？

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
用css中的zoom属性可以让网页实现IE7中的放大缩小功能。

21、怎么样才能让层显示在FLASH之上呢？

解决的办法是给FLASH设置透明:
<a href="http://www.chinaz.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />

22、怎样使一个div层居中于浏览器中？

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
200px;
height:200px;
border:1px solid red;
}
-->
</style>

23、怎样使div背景透明？

首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位。举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="colinivy" />
<title> Colinivy's world</title>
<style type="text/css">
body {
font:normal 12px/30px Verdana; }
#test {
position:relative;
400px;
height:50px;
}
#inner {
z-index:2;
position:absolute;
top:10px;
left:10px;
380px;
height:30px;
color:#003;
font-weight:bold;
text-align:center;
}
#transbox {
z-index:1;
position:absolute;
top:0px;
left:0px;
400px;
height:50px;
background:#eef;
border:1px solid #a00;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity:0.4;
}
</style>
</head>
<body>
<div id="test">
<div>
<p>这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,</p>
</div>
<div id="transbox"></div>
<div id="inner">
BlueIdea,BlueIdea,BlueIdea 
</div>
</div>
</body>
</html>

24、怎样去掉选中时的虚线框？

利用onfocus="this.blur();"例如：<a href="#" onfocus="this.blur();">测试</a>

25、ie6下png背景显示问题？

针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);

26、文字与表单对齐方法？

设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

27、optgroup标签的用法？

optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：
<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>

28、文字与图片垂直居中对齐方法？

为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
<p>我要的坚强<img src="i/image.gif" /></p>
IE:　　只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.

非IE：img{vertical-align:middle}

29、文章标题列表中日期居右显示的两种方法？

方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A：
<p>这是文章标题<span>2010-10-10</span></p>
然后定义p和span的样式：
p{ position:relative}
p span{ position:absolute; right:0}
方法B:
<p><span>2010-10-10</span>这是文章标题</p>
然后定义span右浮动:
p span{float:right}

30、ie6下max/min-width/height实现？

ie6下max/min-width/height实现,_ expression_r(this.width >600 ? “600px” : true);,height同理.

31、空白外边距互相叠加的问题？

一般通过添加透明边框或者1px的内边距避免；
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；
例如：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think</title>
<style>
body{300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>

32、网页设计中的默认字体

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

33、浏览器兼容——常用的css hack

CSS Hack大致有3种表现形式：CSS类内部Hack、选择器Hack、HTML头部引用(if IE)Hack。
     

 内部类：IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识；

选择器Hack：IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}

HTML头部引用(if IE)Hack：针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

（1）.title{ height:200px;
*height:200px;
_height:200px; }
（2）.title{ height:200px;
*height:200px !important;
*height:200px; }
（3）.title{ height:200px; }
*html.title{ height:200px;}
*+html.title{ height:200px;}

 

常用的CSShack方式

(1)方式一 条件注释法

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

(2)方式二 类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

color:red

红色

N

N

N

N

Y

N

Y

N

Y

N

9

color:red9

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y

IE浏览器各版本 CSS hack 对照表

说明:在标准模式中

(3)CSS hack方式三:选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html  *前缀只对IE6生效

*+html  *+前缀只对IE7生效

@media screen9{...}只对IE6/7生效

@media screen {body { background: red; }}只对IE8有效

@media screen\,screen9{body { background: blue; }}只对IE6/7/8有效

@media screen {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

实际应用

比如要分辨IE6和firefox两种浏览器，可以这样写:

我在IE6中看到是红色的，在firefox中看到是绿色的。

解释一下:

上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

CSS hack:区分IE6，IE7，firefox

区别不同浏览器，CSS hack写法:

区别IE6与FF:

区别IE6与IE7:

区别IE7与FF:

区别FF，IE7，IE6:

注:IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*;不能识别 !important;

	IE6	IE7	FireFox
*	√	√	×
!important	×	√	√

IE7能识别*，能识别!important;

FF不能识别*，但能识别!important;

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

以: " #demo {100px;} "为例;

#demo {100px;} /*被FIREFOX,IE6,IE7执行.*/

* html #demo {120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

*+html #demo {130px;} /*会被IE7执行*/

所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;

IE8 最新css hack:

"9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.(只针对IE9 Hack)

"" IE8识别，IE6、IE7不能.

"*" IE6、IE7可以识别.IE8、FireFox不能.

"_" IE6可以识别"_",IE7、IE8、FireFox不能.

IE7hack

*background-color:#dddd00; /* ie 7*/IE8 hack

background-color:red ; /* ie 8/9*/IE9 hack

background-color:blue 9;火狐，傲游，浏览器通用

background-color:red!important;

注意写hack的顺序，其中:

background-color:red;IE8和IE9都支持;

background-color:blue9; 仅IE9支持;

另外，background-color:eeeeee9;的HACK支持IE6-IE8，但是IE8不能识别"*"和"_"的CSS HACK。

可综合上述规律灵活应用。

IE9 和 IE8 以及其他版本的区别说明

background-color:blue; 各个浏览器都认识，这里给firefox用;

background-color:red9;9所有的ie浏览器可识别;

background-color:yellow;  是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，我们就认为是给ie8留的;

+background-color:pink; + ie7定了;

_background-color:orange; _专门留给神奇的ie6;

:root #test { background-color:purple9; } :root是给ie9的，网上流传了个版本是 :root #test { background- color:purple;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}

@media all and (min-0px){ #test {background-color:black;} } 这个是老是跟ie抢着认的神奇的opera，必须加个,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

选择符级Hack

CSS内部选择符级Hack

语法

<hack> selector{ sRules }

说明

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个:

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */

.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */

.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

内部属性Hack

CSS内部属性级Hack

语法:selector{<hack>?property:value<hack>?;}

取值:

_: 选择IE6及以下。连接线(中划线)(-)亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线(_)更为合适。

*:选择IE7及以下。诸如:(+)与(#)之类的均可使用，不过业界对(*)的认知度更高。

9:选择IE6+。

:选择IE8+和Opera。

[;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

说明:一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:如想同一段文字在IE6,7,8，chrome，safari，显示为不同颜色，可这样写:

.test{

color:#000; /* 正常写法普遍支持 */

color:#00F9; /* 所有IE浏览器(ie6+)支持 */

/*但是IE8不能识别" * "和" _ " */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}

注意了:不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

补充:IE6能识别 *，但不能识别 !important,IE7能识别 *，也能识别!important;FF不能识别 *，但能识别!important;下划线"_",IE6支持下划线，IE7和firefox均不支持下划线。

t #test { background-color:purple9; } :root是给ie9的，网上流传了个版本是 :root #test { background- color:purple;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}

@media all and (min-0px){ #test {background-color:black;} } 这个是老是跟ie抢着认的神奇的opera，必须加个,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

选择符级Hack

CSS内部选择符级Hack

语法

<hack> selector{ sRules }

说明

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个:

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */

.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */

.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

内部属性Hack

CSS内部属性级Hack

语法:selector{<hack>?property:value<hack>?;}

取值:

_: 选择IE6及以下。连接线(中划线)(-)亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线(_)更为合适。

*:选择IE7及以下。诸如:(+)与(#)之类的均可使用，不过业界对(*)的认知度更高。

9:选择IE6+。

:选择IE8+和Opera。

[;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

说明:一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:如想同一段文字在IE6,7,8，chrome，safari，显示为不同颜色，可这样写:

.test{

color:#000; /* 正常写法普遍支持 */

color:#00F9; /* 所有IE浏览器(ie6+)支持 */

/*但是IE8不能识别" * "和" _ " */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}

注意了:不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

补充:IE6能识别 *，但不能识别 !important,IE7能识别 *，也能识别!important;FF不能识别 *，但能识别!important;下划线"_",IE6支持下划线，IE7和firefox均不支持下划线。