CSS的兼容解决方案-搞定默认值

或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。

我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。所以解决办法就出来了，那就是对于不统一的默认显示方式，在css中给指定具体数值就可以了，下面我将就我知道的默认标签来进行说明。

列表标签UL LI，这个是朋友抱怨得最多的标签，说每次遇到这个标签的时候IE和FF总是显示不一致。行，既然如此，你何不在样式表中将这个标签的属性给定义了，如 ul{padding:0;margin:0;}，然后再看看，是不是一致了？对于ul标签，IE会自动缩进几个像素，而FF则不是这样，所以这就是根本原因.当然,我上面的定义肯定显示不太美观,这个时候你可以手动进行调节,譬如调节成 {padding:0;margin:0 0 0 10px;list-style-position: inside;},所以今后对于这个标签,只要你发现IE和FF不一致,就去看看对应的css有哪些属性,然后进行夸张的描述,用IE和FireFox查看之,如果一致则有效.FORM标签,这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

关于更多默认值不同的标签,希望大家继续发掘,希望此文能抛砖引玉.

下面的问题不是默认值的问题了.

对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:<div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div>,比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决<div id=”page”> <div id=”bg” style=”float:left;width:100%”><div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div></div>,再嵌入一个float left而宽度是100%的DIV解决之.

总之,只要掌握好相关的诀窍,如果是简单的css,要做出兼容IE和FF的页面,也不是那么麻烦的.有其他技巧的,欢迎在评论中继续讨论.