【面试季之三】IE6兼容问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:36:50
原創
890 人瀏覽過

 

最近面试真的碰到很多基础的问题,平时在工作的时候往往可以直观的看到页面的问题,然后进行代码调试,调试不明白了还可以上网查一下。可是面试的时候,就是得当场反应出来,并且还得能系统的说出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      这些是比较常用的hack方法

 

以下这段是我在整理其他问题的时候看到的一段hack,以前没用过,在这里列出来共享一下,希望哪天有机会,可以实践一下。

在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码

  1. /* 这段代码只有IE/Win可以看见 \*/  
  2. CSS 规则  
  3. /* 结束Hack */  

上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板