你的位置:首页 > 网页设计

[网页设计]【面试季之三】IE6兼容问题


 

最近面试真的碰到很多基础的问题,平时在工作的时候往往可以直观的看到页面的问题,然后进行代码调试,调试不明白了还可以上网查一下。可是面试的时候,就是得当场反应出来,并且还得能系统的说出1、2、3、4、5。。。每每是面试完了就各种懊恼。。。这个纯属活该,谁叫平时自己不总结的呢!昨儿面试回来把脚崴伤了,这几天卧床养伤,顺便把各种基础性问题做个总结,让自己涨涨记性!

 

前端最常见的问题,应该没有之一了吧。。。IE6兼容性问题,虽然小盖童鞋早已经抛弃了IE6,可我天朝人民还是很恋旧的。。。

 

一 文档声明:这个我一般都会写,主要写两种一是过渡型二是html5的文档声明,如果不写,恭喜你触发了IE6的怪异模式,主要是更改了盒模型;

 

二 默认样式:这个不单单针对IE6,主要是每个浏览器可能都有不一样的地方,所以重置默认样式基本已经是默认的规则了吧;

 

三 断头台问题:看着比较吓人,其实我也不知道为什么会起这么个名字,主要是指在IE6下,同向浮动的元素会出现双倍margin的现象,解决的方式比较简单,就是设置浮动元素的display:inline即可;

 

四 img图片外添有a标签的时候会有边框border,解决方案就是设置border:0;

 

五 img图片之间默认是有一定间距的,这个一般是因为在布局的时候有“回车”造成的,解决方案一是可以牺牲布局,不加回车,当然我一般不会这么干,会让代码太难阅读和维护,姐是一个颜控者(囧);二是将img图片进行浮动;

 

六 浮动的块元素和非浮动的块元素会有间隙,解决方案就是让块元素都浮动;

 

七 li标签在设置了宽高且子元素浮动后,li之间会有间隙,解决方案一是不设宽高二是子元素不浮动;

 

八 IE和FF:cursor:hand(IE);cursor:pointer(FF);解决方案两个都写;

 

九 IE6不支持Max和Min的宽高,解决方案使用hack单独设置:_width和_height,在IE中这两个值会根据内容自动进行调整;

 

十 IE6不支持PNG24,解决方案一是可以使用PNG8、Gif等其他格式,二是使用滤镜,好长一段,我就不写了,因为记不住,每次都是复制粘贴。。。

 

十一 IE6不支持opacity,解决方案是使用滤镜filter:alpha(opacity=num);这里建议大家会手写;

 

十二 最小高度问题:有一种清除浮动的方式是使用空标签,可是在IE小有最小高度,解决方案:{height:0px; overflow:hidden; clear:both};

 

以上基本上是我遇到过的,之前面试还被问到了一个IE6下弹出层无法盖住select框,当时卡住了,因为真心没碰见过,后来想想,盖不住就把select框隐藏了呗,回来查了一下这确实也是一个解决方案,另外还有一个方案是使用iframe,在这里先列出来,有时间的时候写一下试试。

 

IE hack:_ie6, +ie7, ie8\0, ie9\9\0