【面试季之三】IE6兼容问题_html/css_WEB-ITnose
前端最常见的问题,应该没有之一了吧。。。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代码
- /* 这段代码只有IE/Win可以看见 \*/
- CSS 规则
- /* 结束Hack */
上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
上一篇: php支持中文字符串分割的函数
下一篇: PHP SOCKET编程详解_PHP教程
推荐阅读
-
求IE6 7 8、谷歌、FF兼容问题,问题在于一个层的height_html/css_WEB-ITnose
-
z-index属性在IE7和IE6的兼容问题_html/css_WEB-ITnose
-
z-index属性在IE7和IE6的兼容问题_html/css_WEB-ITnose
-
DIV+CSS解决IE6,IE7,IE8,FF兼容问题_html/css_WEB-ITnose
-
div错位/解决IE6、IE7、IE8样式不兼容问题_html/css_WEB-ITnose
-
【面试季二】前端性能优化_html/css_WEB-ITnose
-
DIV+CSS解决IE6,IE7,IE8,FF兼容问题_html/css_WEB-ITnose
-
(经验)DIV+CSS解决IE6,IE7,IE8,FF兼容问题_html/css_WEB-ITnose
-
div错位/解决IE6、IE7、IE8样式不兼容问题_html/css_WEB-ITnose
-
(经验)DIV+CSS解决IE6,IE7,IE8,FF兼容问题_html/css_WEB-ITnose