还剩15页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
CSS多浏览器兼容性问题及解决方案兼容性处理要点
1、DOCTYPE影响CSS处理
2、FF:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width
3、FF:支持!important,IE则忽略,可用!important为FF特别设置样式
4、div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了缺点是要控制内容不要换行
5、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法 div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别所以在IE下其实解释成这样 div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important; 浏览器差异
1、ul和ol列表缩进问题 消除ul、ol等列表的缩进时,样式应写成list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效,padding属性对FireFox有效 [注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在Firefox中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list-style:none才能去除列表编号或圆点也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果
2、CSS透明问题 IE filter:progid:DXImageTransform.Microsoft.Alphastyle=0opacity=60 FF opacity:
0.6 [注]最好两个都写,并将opacity属性放在下面
3、CSS圆角问题 IE ie7以下版本不支持圆角 FF-moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px; [注]圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下
4、cursor:handVScursor:pointer 问题说明firefox不支持hand,但ie支持pointer,两者都是手形指示 解决方法统一使用pointer
5、字体大小定义不同 对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大 解决方法使用指定的字体大小如14px 并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)
6、CSS双线凹凸边框 IE border:2pxoutset; FF-moz-border-top-colors:#d4d0c8white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors:#404040#808080; 浏览器bug
1、IE的双边距bug 设置为float的div在ie下设置的margin会加倍这是一个ie6都存在的bug 解决方案在这个div里面加上display:inline; 例如 #divid=”imfloat” 相应的css为 以下为引用的内容 复制代码代码如下:#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } 关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的一个合乎发展的建议是,页面采用标准XHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器很多情况下,FF和Opera的CSS解释标准更贴近CSS标准,也更具有规范性
2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效 请看以下代码 复制代码代码如下:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//EN//www.w
3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns=//www.w
3.org/1999/xhtml head title/title styletype=text/css !-- p{font-size:12px;} p:first-letter{font-size:300%} -- /style /head body p对于世界而言,你是一个人;但是对于某个人,你是他的整个世界纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容/p /body /html [/code] 复制代码代码如下:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//EN//www.w
3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns=//www.w
3.org/1999/xhtml head title/title styletype=text/css !-- p{font-size:12px;} p:first-letter{font-size:300%} -- /style /head body p对于世界而言,你是一个人;但是对于某个人,你是他的整个世界纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容/p /body /html 这段代码对p的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font-size:300%}加上空格,也就是p:first-letter{font-size:300%}后,显示就正常了但是同样的代码,在FireFox下看是正常的按道理说,p:first-letter{font-size:300%}的写法是没错的那么问题出在哪里呢?答案是伪类中的连字符”-”IE有个BUG,在处理伪类时,如果伪类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效而在FF中,加不加空格都可以正常处理仅IE7与IE
5.0可以识别*+htmlselect{…}当面临需要只针对IE7与IE
5.0做样式的时候就可以采用这个HACK
2、仅IE7可以识别*+htmlselect{…!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK
3、IE6及IE6以下识别*htmlselect{…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE
5.x同样可以识别这个HACK其它浏览器不识别
4、html/**/bodyselect{…}这句与上一句的作用相同
5、仅IE6不识别,屏蔽IE6select{display/*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前
6、仅IE6与IE5不识别,屏蔽IE6与IE5select/**/{display/*IE6IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释不屏蔽IE
5.
57、仅IE5不识别,屏蔽IE5select/*IE5不识别*/{…}这一句是在上一句中去掉了属性区的注释只有IE5不识别,IE
5.5可以识别
8、盒模型解决方法selct{width:IE
5.x宽度;voice-family:”\”}\”;voice-family:inherit;width:正确宽度;}盒模型的清除方法不是通过!important来处理的这点要明确
9、只有Opera识别@mediaallandmin-width:0px{select{……}}针对Opera浏览器做单独的设定以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式
1.区别FF和IE 1-1 首先,当然是!important大法,可以提升指定样式规则的应用优先权,如下面的例子插入代码div{ background-color:red!important; background-color:blue; }因为!important声明在IE6中并不是绝对的,它会被之后的同名属性定义所替换也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red” 1-2 还有一种方法,就是IE浏览器可以识别“”等一些符号,如“~”、“`”、“”等,都只有IE可以识别,但是不合理,!important是符合标准的所以插入代码div{ background-color:red; background-color:blue; }在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“”,则应该得到的蓝色的背景,因此可以知道“”只有IE可以识别 这样,我们就可以把FF和IE的样式分离开下面就是解决IE自己的问题了
2.区别IE
5.5和IE的其他版本 看一个例子插入代码div{ background-color:black; background-color/*IE
5.5*/:green; }这个例子使用了“”,只有IE可以识别,在IE6中得到了黑色的背景;而在IE
5.5中得到的绿色的背景;在IE5中也得到了黑色的背景这就说明了第二句定义只有IE
5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的 到此我们已经把FF、IE
5.
5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了
3.区别IE5与IE
5.5+插入代码div{ background-color:red; } div/*IE
5.5+*/{ background-color:black; }这里我们又用到一个HACK,就是“div/**/{}”,这个定义在IE5以上的版本才能识别出来这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景
4.完整的Hack 这样我们就可以为不同的浏览器定义不同的样式了来看个完整的例子插入代码div{ width:500px; height:50px; background-color:red!important;/*FF*/ background-color:blue;/*IE5*/ text-align:center; } div/*IE
5.5+*/{ /*IEonly*/background-color:black;/*IE6*/ /*IEonly*/background-color/*IE
5.5*/:green; }需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE
5.5对于IE的定义在属性前要加“”,因为“div/**/{}”这个HACK在FF中可以识别 在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现在继续对浏览器中存在的CSS的兼容性问题进行简单说明1)列表不能换行的问题问题 li设置为浮动,后面的li紧随其后,不能换行解决 在下一个li上清除浮动clear:both实例 [html] viewplaincopyspan style=font-size:18px;style type=text/css #one{ float:left; } #two{ clear:left; } /style /head body li id=one 一级标题 div id=onediv ul id=oneli二级标题 /ul ul id=oneli 二级标题/ul /div /li li id=two 一级标题 div ul 二级标题/ul ul 二级标题/ul /div /li /body/span 2)如何对齐文本和文本输入框问题 当input元素在设置了高时,在IE
7、IE
8、IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera解决 vertical-align:middle;实例[html] viewplaincopyspan style=font-size:18px;style type=text/css .in{ width:200px; } .alter { width:200px; vertical-align:middle; } /style /head body div修正前/div div 用户名input name=用户名 type=text class=in style=height:100px; 密码input name=密码 type=text class=in style=height:100px; /div br/ br/ div修正后/div div用户名input name=用户名 type=text class=alter style=height:100px; 密码input name=密码 type=text class=alter style=height:100px; /div /body/span 3)容器宽度在浏览器中解释不同问题 不同浏览器下宽度不同,比如说设置width200px,在iE
7、IE
8、IE9下显示的是200px,在FF、Chrome、Opera中显示的是220px解决 用width:200px;*width:220px,其中iE
7、IE
8、IE9会识别两个宽度,以后者为准,故宽度为220px,在FF、Chrome、Opera中,识别第一个宽度,解析后显示宽度为220px实例[html] viewplaincopyspan style=font-size:18px;/head body 修正前 div style=border:10px solid red;width:200px;height:200px;cursor:pointer; onclick=alertthis.offsetWidth 点我,看看有什么不同! /div 修正后 div style=border:10px solid red;width:200px; *width:220px; height:200px;cursor:pointer; onclick=alertthis.offsetWidth 点我,看看有什么不同! /div /body/span 4)Div居中问题问题 IE
7、IE
8、IE9在设置了margin-left和margin-right为auto后,并不能使div居中显示,其他行解决 设定body居中,定义text-algin:center实例[html] viewplaincopyspan style=font-size:18px;body style=text-align:center; div style=margin-left:auto;margin-right:auto; width:300px; height:200px; border:10px solid red; div居中问题解决 /div /body/span 5)字体大小问题问题 对字体大小small的定义不同,在Firefox和Chrome中为small,而IE
7、IE
8、IE9中为16px,差别挺大解决 明确说明字体的大小,例如16px实例[html] viewplaincopyspan style=font-size:18px;body p style=font-size:small;p对象中的内容,此时字体大小为small/p p style=font-size:16px;p对象中的内容此时字体大小固定为16px/p /div /body/span 6)min-height问题问题 IE
7、IE
8、IE9对min-height不识别,其他无问题解决 #box{width:100px;height:35px;} htmlbody#box{width:auto;height:auto;width:100px;min-height:35px;} 实例[html] viewplaincopyspan style=font-size:18px; style type=text/css #box{ width: 100px; height: 35px;} htmlbody #box{ width:auto; height:auto; width:100px; min-height:35px;} /style /head body div style=border:1px solid red; width:150px; height:35px;最小宽度问题/div br/ div style=border:1px solid red; width:150px; min-height:35px;最小宽度问题/div 解决方法 div id=box style=border:1px solid red;最小宽度问题/div br/ div id=box style=border:1px solid red;最小宽度问题/div /div /body/span 7)层垂直居中问题 层不能垂直居中解决 利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1pxsolidred;实例[html] viewplaincopyspan style=font-size:18px;style type=text/css #hello{ position:absolute; top:50%; left:50%; margin:-100px; width:200px; height:200px; border:1px solid red; } /style /headbody div id=hello层垂直居中问题/div /body/span 8)嵌套div标签的居中问题问题 假定有一下情况即div嵌套div divid=a divid=b/div /div 此时要设置内层div在外层div的居中位置,在外层设置了text-algin为center后,IE
7、IE
8、IE9显示正常,但是在IE10和chrome和opera和FF仍然显示在居左位置解决 除在外层设置text-algin为center,在内层div中设置margin0auto样式实例[html] viewplaincopyspan style=font-size:18px; style type=text/css .alter{ width:150px; height:50px; } /style /head body 解决前 div style=border:1px solid red; width:300px; height:100px;text-align:center; div style=border:1px solid red; width:150px; height:50px;嵌套div标签的居中问题/div /div /div 解决后 div style=border:1px solid red; width:300px; height:100px;text-align:center; div style=border:1px solid red; width:150px; height:50px; margin:0 auto;嵌套div标签的居中问题/div /div /body/span 9)td高度的问题问题 在IE
9、IE
10、FF、chrome中table中td的高度不包含border的宽度,但是IE7和IE8中td的高度包含了border的高度,设置line-height和height一样解决 暂无解决方法其问题示例如下 [html] viewplaincopyspan style=font-size:18px;body table tr td style=line-height:20px; border:5px solid red;设置line-height:20px/td /tr /table table tr td style=height:20px; border:5px solid red;设置height:20px/td /tr /table /body/span 10)li指定高度后,出现排版错误问题 在IE7下如果为li指定高度可能会出现排版错位,其他浏览器无此现象解决 设置line-height实例[html] viewplaincopyspan style=font-size:18px;style type=text/css li{ list-style-position:inside; } /style /headbody 解决前 li style=height:40px;hello/li li style=height:40px;hello/li li style=height:40px;hello/li li style=height:40px;hello/li 解决后 li style=line-height:40px;hello/li li style=line-height:40px;hello/li li style=line-height:40px;hello/li li style=line-height:40px;hello/li /body/span 11)list-style-position默认值的问题问题 IE
7、FF、chrome、Opera默认的li的list-style-position属性为inside,而在IE
8、IE
9、IE10默认的是list-style-position:outside解决 将其显示的样式明确表示实例[html] viewplaincopyspan style=font-size:18px;style type=text/css li{ list-style-position:inside; } /style /headbody div解决前 li hello/li li hello/li /div div解决后 li hello/li li hello/li /div /body/span 12)禁止选取网页内容问题 在需要禁止选取网页的内容,FF用-moz-user-select:none,其他浏览器用onselectstart=returnfalse解决 FF-moz-user-select:none 其他onselectstart=returnfalse实例[html] viewplaincopyspan style=font-size:18px;/headbody onselectstart =return false div name=content style=width:192px; -moz-user-select:none; 善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息,在easyui框架下向datagrid中导入数据,因为
1.0版本中社河做过这个功能,参照他的代码完成了我这部分,根本思想是一样的查找数据转换为json格式,再显示到窗体中 /div /body/span 13)如何对其文本和文本输入框的内容问题 当input元素在设置了高和设置了text-align:center时,在IE
7、IE
8、IE9下会出现文本和文本输入框内容不能对齐的现象,其他正常,包括opera解决 在样式中设置line-height:100px实例[html] viewplaincopyspan style=font-size:18px;style type=text/css .in{ width:200px; } .alter { width:200px; vertical-align:middle; } /style /head body div修正前/div div 用户名input name=用户名 type=text class=in style=height:100px; line-height:100px;text-align:center; value=zhudan 密码input name=密码 type=text class=in style=height:100px; line-height:100px;text-align:center; value=zhudan /div br/ br/ div修正后/div div用户名input name=用户名 type=text class=alter style=height:100px; line-height:100px;text-align:center; value=zhudan 密码input name=密码 type=text class=alter style=height:100px; line-height:100px;text-align:center; value=zhudan/div /body/span 。