FireFox与IE中CSS兼容技术集绵整理 001(4)

2019-01-12 12:37

?

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; }

不过需要在同文件夹下加入一下图片:


FireFox与IE中CSS兼容技术集绵整理 001(4).doc 将本文的Word文档下载到电脑 下载失败或者文档不完整,请联系客服人员解决!

下一篇:2010-2011学年度第二学期机电工程学院 学生会文艺部工作计划

相关阅读
本类排行
× 注册会员免费下载(下载后可以自由复制和排版)

马上注册会员

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信: QQ: