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