CSS浏览器兼容问题的详细解答.docx

CSS浏览器兼容问题的详细解答CSS浏览器兼容问题的详细解答    下面由小编打来CSS浏览器兼容问题的详细解答，希望对诸位有所帮助。  1.Div居中问题p设置margin-left,margin-right为auto时已经居中，IE不行，IE需要设定body居中，首先在父级元素定义text-algin:center;这个的意思就是在父级元素内的内容居中。2.链接(a标签)的边框与背景a链接加边框和背景色，需设置display:block,同时设置float:left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序:L-V-H-ACode。4.游标手指cursorcursor:pointer可以同时在IEFF中显示游标手指状，hand仅IE可以。5.UL的padding与marginul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义ul{margin:0;padding:0;}就能解决大部分问题。6.FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了。7.BOX模型解释不一致问题在FF和IE中的BOX模型解释不一致导致相差2px解决方法：p{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：p{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xxpx!important;#box{width:600px;//forie6.0-w\idth:500px;//forff+ie6.0}#box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-}8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}p[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.9.最狠的手段-!important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}值得注意的是，一定要将xxxx!important这句放置在另一句之上，上面已经提过。10.IE,FF的默认值问题或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，p或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的.默认显示不一样，而这个默认样式该