码迷,mamicode.com
首页 > Web开发 > 详细

css样式对于ie和火狐兼容性写法1

时间:2015-10-20 06:53:44      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:兼容性

前台样式最烦人的就是各种浏览器跟分辨率的 兼容问题

首先需要了解各个浏览器之间样式在哪几方面容易出问题

IE支持自定义光标文件cursor:url()
IE
支持自定义滚动条颜色风格
IE6
中的select有永远处在最上的bug,而且cssselect不起作用。

form中,IE支持label,包括文字和图片;但是火狐不支持图片的label
点击图片不能让label forradio或者checkbox产生效果。

IE
和火狐都是支持onscroll事件的,但是火狐中textarea对此事件不支持。

CSS
方面,IE中支持在CSS中嵌入expresion,而Firefox不支持
火狐支择相邻子选择符“>”,而IE6不支持(IE7支持)

火狐对displayinline-block不支持,而IE均支持。

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐存在很大的解析差异,这里介绍一下兼容要点。
对高度的解析
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
火狐:没有定义高度时,如果内容中包括了图片内容,火狐的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。

结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!

img对象alttitle的解析
alt:当照片不存在或者load错误时的提示;
title
:照片的tip说明。
IE中如果没有定义titlealt也可以作为imgtip使用,但是在火狐中,两者完全按照标准中的定义使用

结论:大家在定义img对象时,最后将alttitle对象都写全,保证在各种浏览器中都能正常使用

其他的细节差别
当你在写css的时候,特别是用float: left(或right)排列一窜图片时,会发现在火狐里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束,都无济于事。

其实这里还有另外一个问题,就是IE对于空格的处理,火狐是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题,多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在火狐里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和火狐的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。

10大兼容要点

1DOCTYPE 影响 CSS 处理
2火狐: div 设置margin-left, margin-right auto 时已经居中, IE 不行
3火狐: body 设置 text-align, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4火狐: 支持!important, IE 则忽略, 可用 !important 火狐特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上
5div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
6cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand IE 可以
7火狐: 链接加边框和背景色,需设置display: block, 同时设置 float: left 保证不换行。参照 menubar, a menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
8、在火狐IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写{margin:XXpx!important;}

9ul标签在火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}

接下来就是IE6/IE7/IE8以及火狐浏览器中兼容样式的写法

IE6top_width:100px;}此种方法只有IE6可识别IE7/8跟火狐无法识别

IE7*+htmltop{width:100px;}此种方法只有IE7可识别 IE6/8跟火狐无法识别

IE8top{width:100px;}

火狐::root body top{width}此种写法仅火狐能识别 IE 浏览器无法识别

如果只让ffIE8看见用html>/**/body .head{color:#000;}
如果只是不让ie6看见用html>body.head{color:#000;} 即对IE 6无效
如果只是不让ffIE8看见用*body.head{color:#000;}    即对ffIE8无效

html*{color:#f00}           支持IE6 IE7          不支持 IE8 FF
body>p{color:#f00}           
支持IE7 IE8 FF       不支持 IE6
html[xmlns] p {color:#f00}       
支持 IE7 IE8 FF    不支持 IE6
@import "style.css"
@import "style.css"
@import url(style.css)
@import url(‘style.css‘)
@import url("style.css")       
支持 IE6 IE7 IE8 FF
P{/*/*color:#f00;/* */}           
支持 IE6 IE7  FF     不支持 IE8


css样式对于ie和火狐兼容性写法1

标签:兼容性

原文地址:http://webphp.blog.51cto.com/8690270/1704259

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!