?
IE6,IE7,FF之间差别:
1. FF: div设置 margin-left, margin-right为auto时已经居中, IE不行
2. FF: body设置 text-align 时, div需要设置margin: auto(主要是 margin-left,margin-right)方可居中 3. FF:设置padding 后, div 会增加height和width,但IE不会,故需要用!important 多设一个 height
和 width
4. div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然
后插入文字,就垂直居中了。缺点是要控制内容不要换行
5. cursor: pointer可以同时在IE FF中显示游标手指状,hand仅IE可以
6. FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar,
给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
7. 在mozilla、firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}
8. FF中字符不能自动换行,需添加{white-space:normal;width: XXpx}
9. 兼容FF IE的漂亮Button控件:用css设计的漂亮Button按钮在FF中没法显示出特效来,CSS如下: .BtnStyle{BORDER-RIGHT: #588FC7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #588FC7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff,
EndColorStr=#8CB3D9); BORDER-LEFT: #588FC7 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #588FC7 1px solid; padding-bottom:2px; width:126px; height:23px;} 因此做了一个兼容IE FF的漂亮按钮,CSS如下: .BtnStyle {
background: url(btn.JPG);BORDER-RIGHT: #FFF 1px solid;*BORDER-RIGHT: #588FC7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFF 1px solid;*BORDER-TOP: #588FC7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#8CB3D9); BORDER-LEFT: #FFF 1px solid;*BORDER-LEFT: #588FC7 1px solid; CURSOR: pointer; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFF 1px solid;*BORDER-BOTTOM: #588FC7 1px solid; padding-bottom:2px; width:126px; height:26px;*height:23px; }
不过需要在同文件夹下加入一下图片: