DIV+CSS浏览器兼容问题

IE6能识别*和_，但不能识别 !important, 

IE7能识别*，也能识别!important,不能识别_; 

FF不能识别*和_，能识别!important;

所以可以这样来区分IE6，IE7，firefox 

: background:orange;*background:green;_background:blue; 

注：书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

实例：

------------------------------经典方案一---------------------------------

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;    

写两句代码来控制一个属性，区别Firefox与IE6：    

background:orange;*background:blue;    

//这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；    

写两句代码来控制一个属性，区别IE7与IE6：    

background:green !important;background:blue;    

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。    

写两句代码来控制一个属性，区别Firefox与IE：    

background:orange; *background:green;    

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*    

写三句代码来控制一个属性，区别Firefox，IE7，IE6：    

background:orange;*background:green !important;*background:blue;    

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。    

以上HACK用法，可以实现不同浏览器的CSS代码，但是却不能通过CSS代码验证工具的验证！其实通不通过都无所谓，主要是实用，至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。    

------------------------------经典方案二---------------------------------

下面介绍用* html,* +html的hack写法，此方法可以通过CSS验证，也比较规范。哈哈，HACK本来是不归范的产物，只是我个人认为这种Hack写法是Hack写法中的规范而已，不要拿东西砸我！！！    

#sample {background:red;}    

* html #sample {backgroud:green;}    

* +html #sample{backgroud:blue}    

在DW中建立一个sample层，写入以上代码，运行一下看看，你会在Firefox或是Netscape或Opera中看到，sample的背景色是红色的。在IE6中看到背景色是绿色的，而在IE7中却是蓝色的。好玩吧~    

同样，你也可以应用到class和body中去，一样的道理，三个写法:    

第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。    

第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。    

第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。   

------------------------------经典方案三---------------------------------

第一种或是第二种方案，写出来的CSS文件代码长的很，特别是第二种，这样载入CSS时，会很缓慢，对网站设计没有好处。如果你做的是比较大的网站，还是建议你用下面这种方法，就是通过javascript判断浏览器的类型，然后针对不同的浏览器链接不同的CSS文件。    

我们针对不同的浏览器开发出不同的CSS文件，一个针对IE，一个针对Firefox，一个针对其它所有类型的浏览。这样，我们在设计时，就不用去考虑太多，只要我这个CSS能在FF中正常显示，我就不管IE下执行下怎么样了，同样IE中正常的CSS，也不去管它在FF中会是显示如何的乱。     

首先，我们在HTML代码里要放入标签，标签里先写入默认要用到的CSS文件的位置，建议放IE中用到的CSS文件，比如，这样能避免在对方浏览器没有开启javascript的时候，无法判断浏览器类型的时候，也能以90%以上人使用的IE正常显示。    

把下面这段JS放在HEAD中    

   

window.navigator.userAgent.indexOf后面是浏览器的类型，如果是Opera的话，还可以加一条if来判断，用javascript 的条件判断去写吧。 

=============================================

CSS技巧汇总 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行   2. margin加倍的问题      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;     例如：     <#div id=”imfloat”>     相应的css为     #IamFloat{     float:left;     margin:5px;/*IE下理解为10px*/     display:inline;/*IE下再理解为5px*/}    3.浮动ie产生的双倍距离      #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}     这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);     #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;     4 IE与宽度和高度的问题  IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。     比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：     #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}     5.页面的最小宽度      min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个