由于IE6的使用人群非常广泛,这就导致所有的网站开发人员都得向IE6的网页标准看齐。为了能让网站在IE6下可以正常显示,不知花费了多少开发人员的休息时间来加班调试。甚至有些网站干脆只针对IE6进行支持,使用其他浏览器浏览时会导致网页错位或者不响应等问题。
今天做了个项目,做到一半用浏览器测试了一下,所有浏览器都正常,就是ie6下错位,css找了半天头都大了,还是多出1像素,但是检查所有都正常,郁闷,之后发现了ie6一般出现错位的几种情况(备用+分享):
IE6错位一般有两种情况。
一种是,你把所有像素都填满了,例如900px,你左,200,中500,右200,在其他都没有问题,理论上也对,可是IE6不行。所以你必须得稍减到几像素才可以,例如200+498+200,这样可以解决这个问题,其实一般设计左右之间都有空。如果左右结构的话,一般是左边200加一个空20再加上680,其实你只要设置左float:left,右float:right就行了。中间的20就留它去自行决择,这样左右错位就解决了。
第二种就完全是你css设置的问题了。如果左中右结构 左中都设置成float:left,右设置成float:right,中和右的空可以不管,可是左中为了留空必须在中的css 里加上margin-left:10px才可以解决,切记一定要加上display:inline。否则在ie6下面,margin-left:10 px就变成20px;
一般情况下错位都是由于上两种原因造成的,也有的是可能因为都设置好宽度了,但里面的内容超过了这个宽度,你只要在个css加上over-flow:hidden.就行了。
现在的网站开发人员,为了支持所有浏览器的同时支持IE6, 添加的独立代码要达几十甚至几百行。为了兼容IE6,开发人员浪费了很多时间和精力。
【编辑推荐】