常见css兼容问题：1.clear:both不想受到float浮动的影响，就在样式中写入clear:both2. IE浮动 margin 产生的双倍距离#box {float:leftwidth:100pxmargin:0 0 0 100px/*这种情况之下IE会产生200px的距离*/display:inline/*使浮动忽略*/3. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值先定义 ul {margin:0padding:0}4.鼠标手指状显示全部用标准的写法 cursor: pointer5 IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽高度是比较重要的。要解决这个问题，可以这样：#box{ width: 80pxheight: 35px}html>body #box{ width: autoheight: automin-width: 80pxmin-height: 35px}6.关于min,max中的ie兼容 /*min-width,max-width,min-height,max-height等对非ie有效，对ie无效*//*类似expression(document.body.clientWidth <200? "200px": "auto",document.body.clientWidth >300? "300px": "auto" )等表达式等对ie有效，对非ie无效*/#container{ min-width: 200pxmax-width:300pxwidth:expression(document.body.clientWidth <200? "200px": "auto",document.body.clientWidth >300? "300px": "auto" )height:200pxbackground-color:#F00}7.关于浏览器的私有属性text-overflow:ellipsis-o-text-overflow:ellipsis-icab-text-overflow: ellipsis-khtml-text-overflow: ellipsis-moz-text-overflow: ellipsis-webkit-text-overflow: ellipsis别兴奋了，该支持的都支持，其他都是骗小朋友滴。基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。并不是说像-moz-text-overflow现在有用，而是 一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私 有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用8.关于_、*、!importantIE、Firefox、Opera和Safari对CSS样式important和*的支持1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持2、IE7、IE8、Firefox、Opera、Safari都支持 !important3.IE系列浏览器可读[\9](ie6+可读)，而IE6和IE7可读[*]，IE7可读+，另外IE6及以下可辨识[ _ ](下划线)顾名，important的优先级要高. 举例说明：<style type=”text/css”>body{background-color:#FF0000 !important*background-color:#00FF00 !important*background-color:#0000FFbackground-color:#000000}</style>IE6选择最后一个，即：background-color:#000000（因为IE6对important不感冒）IE7选择第二个，即：background-color:#000000（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important（IE8完全感冒于important，同时丢弃了对*的感情）另外再补充一个，下划线 "_",IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。设置样式的顺序如下：p.ie{height:60pxtext-align:centerline-height:60pxborder:1px dashed #bbbbackground:#f7f7f7font:15color:blue// 所有浏览器color:brown\9// 所有IE浏览器+color:red// IE7_color:green// IE6}其他css兼容技巧：1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto(当然不是万能)3, 若需给 a 标签内内容加上 样式, 需要设置 display: block(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8，html控件除了指定id，还应该加上name属性9,alt只能在ie下识别，FF和其它浏览器必须加title10,如果想按px指定宽度和高度，数字后后要带”px”,IE默认为px，但FF不识别11,设置表格border宽度，但看起来还是很宽，要加上style="border-collapse:collapse"
CSS滤镜:Chroma属性 .Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：Filter：Chroma（color=color）.下面三个选择器你完全可以这么理解：border-top-color:#dddddd
border-bottom-color:#dddddd
filter: chroma( color =#dddddd)
只不过加上_后，只有ie6能够识别，这属于css hacker。你可以上网查一查css hacker，你就会懂了
.nav ul { display: blockheight: 26px}.nav ul li {
display:'block'
width:aboutfloat: leftmargin-righ t: 20pxfont-weight: bold}
