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

 

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