常见浏览器兼容问题一:
块属性标签float后,又有横行的margin情况下,在ie6显示时,后面的一块会被顶到下一行,尤其出现在稍微复杂点的页面。这是div+css使用div float布局模式通过margin实现横向间距最常见出现兼容问题。
遇到这种情况可以在float的标签样式控制中加入 display:inline;将其转化为行内属性。
常见浏览器兼容问题二:IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
常见浏览器兼容问题三:
设置小圆角背景的标签里,设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度。由于ie6、7和遨游里这个标签的高度不受控制,要把超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。而ie8以后的浏览器都会给标签一个最小默认的行高的高度。一般不会出现这种问题。
常见浏览器兼容问题四:IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。 我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。
常见浏览器兼容问题五:
行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6里的间距比超过设置的间距。
行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
常见浏览器兼容问题六:javascript兼容性问题
这个也是个非常麻烦的问题来源,主要的问题依然来自于IE浏览器系列和其他浏览器的差别:IE调用的是系统组件,而其他浏览器调用的自己内建的组件,这就造成了你必须针对不同的浏览器调用不同的组件,最典型的方面莫过于ajax。但其他浏览器之间的问题也一样不少,我见过的问题就有:RGB值的表示方式的不同,offsetleft取出的值不同,还有前篇文章提到的readystate的解释不同等问题。javascript的问题有相当一部分可以靠一些脚本插件如jquery来改善,但要想做完善,需要针对不同浏览器进行详细的测试。