兼容问题

padding与宽度高度

FF或者设置padding后，div会增加height和width，但IE不会，故需要用！important多设一个height和width

！important：FF火狐和IE7对于！important会自动优先解析，IE6以下则忽略，可用！important为FF火狐和IE7单独设置样式，不影响IE6的显示，值得注意的是，一定要将xxxx  ！important这句放置在另一句之上

div的垂直居中问题

div的垂直居中问题：vertical-align:middle，只有在具有valign属性的元素中设置才有用

将行距增加到和整个div一样高 line-height行高，然后插入文字，就垂直居中了，缺点是要控制内容不要换行

vertical-align:middle，div元素里面的文字不垂直居中，解决：设置行高，line-height：行高

ul和ol列表缩进问题

消除ul，ol等列表的缩进时，样式应该写成list-style:none；margin：0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。在IE7以下中仅仅这只margin：0px;padding:0px;以及list-style:none三项才能达到最终效果

css透明问题

IE:filter：alpha （opacity=50）  在IE6中没用

FF： opacity：0.6 在IE8以下没用

注：最好两个都写，并将opacity属性放在下面

css圆角问题

IE8以下不支持圆角，圆角使用背景图片

FF：-moz-border-radius:圆角弧度

谷歌：-webkit-border-radius:圆角弧度

cursor

只有IE8以下支持cursor：hand

所有浏览器都支持cursor：pointer

解决方法：统一使用pointer

字体大小定义不同

对字体大小small的定义不同，FireFox种为13px，而IE6种为16px,差别挺大

解决方法：使用固定的字体大小

IE的双边距BUG

当几个浮动元素同时设置margin边距是，浮动方向和浮动边界的方式一致，第一个元素的边距会是其他边距的双倍

解决方法：css  hack  原来的margin-left 设置为margin-left，将边距设置为原来的一半，这种方法只能在IE6中起作用，火狐中不作用

给第一个或所有元素设置属性display：inline；

css Hack  技术标准

由于不同厂商的浏览器或某浏览器的不同版本（如IE,FireFox,Safari，Opear,Chrome等），对css的支持，解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这是，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的css样式，我们把这个针对不同的浏览器/不同版本写响应的css  code的过程，叫做 css hack！

css hack

IE6   _   _background：red;

IE7   *    *background :red;

IE8  \0或者\9（加后面的）background\9:red;

IE9  \9（加后面的）

FF:    !important（加后面）  一般不用，能用其他办法解决的都不用

css  hack大致有3种表现形式

css类内部hack  ，选择器hack   HTML头部引用（if  IE）hack