CSS 多浏览器兼容性问题及解决方案

CSS多浏览器兼容性问题及解决方案兼容性处理要点1、DOCTYPE影响CSS处理2、FF:设置padding后，div会增加height和width，但IE不会，故需要用!important多设一个height和width3、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.Alpha(style=0,opacity=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;浏览器bug1、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//DTDXHTML1.0Transitional//EN//=//=text/css!--p{font-size:12px;}p:first-letter{font-size:300%}--/style/headbodyp对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。/p/body/html[/code]复制代码代码如下:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN//=//=text/css!--p{font-size:12px;}p:first-letter{font-size:300%}--/style/headbodyp对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。/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中，加不加空格都可以正常处理。1、仅IE7与IE5.0可以识别*+htmlselect{…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。2、仅IE7可以识别*+htmlselect{…!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK。3、IE6及IE6以下识别*htmlselect{…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。4、html/**/bodyselect{…}这句与上一句的作用相同。5、仅IE6不识别，屏蔽IE6select{display/*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。6、仅IE6与IE5不识别，屏蔽IE6与IE5select/**/{display/*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.57、仅IE5不识别，屏蔽IE5select/*IE5不识别*/{…}这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。8、盒模型解决方法selct{width:IE5.x宽度;voice-family:”\”}\”;voice-family:inherit;width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。9、只有Opera识别@mediaalland(min-width:0px){select{……}}针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。1.区别FF和IE1-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.区别IE5.5和IE的其他版本看一个例子：插入代码：div{background-color:black;background-color/*IE5.5*/:green;}这个例子使用了“”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。3.区别IE5与IE5.5+插入代码：div{background-color:red;}div/*IE5.5+*/{background-color:black;}这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。4.完整的Hack这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：插入代码：div{width:500px;height:50px;background-color:red!im