欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-12 09:39:31
...
最近面试真的碰到很多基础的问题,平时在工作的时候往往可以直观的看到页面的问题,然后进行代码调试,调试不明白了还可以上网查一下。可是面试的时候,就是得当场反应出来,并且还得能系统的说出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了。