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
网友评论