请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 312|回复: 5

CSS样式表在Firefox和IE下的区别

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-20 23:00:30 | 显示全部楼层 |阅读模式

总结的一些CSS在FF和IE下的区别!可能不完整,以后会陆续补充。

FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFox 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FireFox 中显示游标手指状, hand 仅 IE 可以

FireFox: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面:

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;网页教学网

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}就能解决大部分问题

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

<script type=”text/javascript”>

FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

IE怎么不行? .div{width:100px;margin:0 auto;}一样居中

FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

这个是ie对css盒模型解释有问题造成的,只能迁就它网页教学网

FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFox 特别设置样式

IE7 一样兼容 !important 了

cursor: pointer 可以同时在 IE FireFox 中显示游标手指状, hand 仅 IE 可以

pointer是标准的写法,hand是ie6之前版本自行定义的

补充:

ie6有margin双倍外补丁bug,需要做css .hack

firefox更符合标准,在浮动和清除浮动上需要特别注意,而ie容错性比较好

ie中height小于一定值(可能是18px)时,可能会在页面上体现不出来,需要overflow:hidden;而firefox可以完全体现height;

装好ie6 ie7 ff2大致写个一两个页面就知道大概的不同了,其实不难

屏蔽IE浏览器(也就是IE下不显示)

网页教学网

*:lang(zh) select {font:12px !important;} /*FF的专用*/

select:empty {font:12px !important;} /*safari可见*/

这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

回复

使用道具 举报

8

主题

1138

帖子

88

积分

注册会员

Rank: 2

积分
88
发表于 2016-3-16 19:08:15 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

0

主题

1031

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-20 18:55:33 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

0

主题

1031

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-11-2 16:06:52 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

3

主题

1133

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2019-1-3 18:25:11 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

7

主题

971

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2019-2-25 22:12:47 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-3-19 06:08 , Processed in 0.227270 second(s), 31 queries .

快速回复 返回顶部 返回列表