四年前听说IE6要消失了。没想到四年后还活着,让前端工程师很烦。以下是我在网上搜索到的关于IE6的信息 花了一些时间整理bug的解决方案,总共有12条,希望对大家有所帮助,如下:
1. IE6下的图片被多次加载
IE6windoww.onload执行脚本(或模拟domready)时,会导致cache出现一些问题:
1、此时JS对dom进行渲染级变化,如设置宽高、innerHTML等,将重新要求元素的背景图
2、此时JS将多个Image元素设置为同一src,这个src会被多次请求… 详情>>
2. 使用DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4//strict.dtd">
或使用XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1//DTD/xhtml1-strict.dtd">
IE6进入quirks模式是你需要处理的最棘手的事情——它已经足够奇怪了。
3. position设置: relative
设置一个元素为“”position:relative“它可以解决很多问题,尤其是当你遇到隐藏或对齐奇怪的盒子时。显然,你需要非常小心,因为绝对定位的子节点可能会被重新定位。
4. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能会导致IE6双倍margin问题。例如,您将margin-left指定为5px,但IE6实际上是10px。”display:inline尽管没有必要解决这个问题,但你的CSS仍然有效。
5. 将一个元素设置为haslayout
通过haslayout设置元素,可以解决许多IE6(和IE7)的渲染问题。 这是IE的内部属性(IE隐藏,更多关于haslayout的信息,可以参阅这里),用于确定内容与其他元素相比是如何布局和定位的。如果需要将inline元素(如链接)设置为block元素,或者应用透明效果,也可能需要设置haslayout。
设置haslayout最简单的方法是为CSS设置一个高度或宽度(zoom也可以使用,但zoom不是CSS标准的一部分)。我们建议设置实际尺寸,但问题是这是不现实的,你可能需要使用它。”height:1%”。如果父元素没有设定高度,则不会影响元素的实际高度,此时haslayout已经启用。
6. 修改重复文本bug
复杂的布局可以触发浮动元素的最后一些字符可能出现在去除元素下的bug中。这里有几种解决方案,有些是完美的,但也有必要做一些重复的测试:
“确保使用所有元素”display:inline;”,在最后一个元素上使用一个”margin-right:-3px;使用条件注释为浮动元素的最后一个条件,例如:
<!--[if !IE]>Put your commentary in here...<![endif]-->
在容器的最后一个元素中使用空div(也需要设置90%或类似宽度的宽度),访问 positioniseverything.net 检查问题的完整介绍。
7. 只使用可点击和悬停的元素<a>标签
IE6只知道CSSA标签 hover效果。
您还可以使用它们来控制基于JavaScript的组件,以保持键盘的可操作性。有一些可替代的选择,但是<a>标签比其他方案更可靠。
8. 使用!important 或者高级选择器来区分IE6
在额外文件中不使用传统Hack或使用传统Hack条件CSS也有可能为IE6写出特别可行的代码。例如,最小高度可以通过这个代码来定义:
- #element{
- min-height:20em;height:auto !important; /* 所有浏览器都理解这个代码 */
- height:20em; /* IE6 这个值使用错误 /* }
- }
IE6 不懂min-height,用20em错误覆盖。auto“高度,但如果内容需要更多的空间,它会自动增加高度。
另一种可选的方法是使用先进的选择器,如e.g.
- #element{min-height:20em;height:20em;}
- /* IE6忽略了以下代码 */
- #element[id]{height:auto;}
9. 避免百分比单位
百分比会让IE感到困惑。除非你能准确地控制每个父元素的大小,否则你可以做最好的预防措施。你可以通过它!important继续在其他浏览器中使用百分比,例如:
- body{
- margin: 2% 0 !important;
- margin: 20px 0; /* IE6 only */
- }
10. 尽快测试并不断测试
不要等到你的网站或应用程序完成后才测试IE6;这样,问题可能会更糟,需要更多的时间来纠正。如果您的网站能够在Firefox和IE6中正常运行,则在其他浏览器中通常没有问题。
11. 重建您的代码
经常发生的事情是,纠正bug比重新考虑布局问题需要更长的时间。对HTML做一些小的改变和一些简单的CSS往往更有效。这可能意味着你必须放弃完美的代码,但会有更少的长期问题,如果你在未来处理这些可能的问题,你会很清楚。
虽然IE8并没有从根本上改变IE,但它对CSS标准的支持确实发生了很大的变化。但即便如此,我们仍然不能希望IE8的普及,这是一件非常不可靠的事情,顽固的IE6用户可能不会接受IE8。因此,在过去的一年半里,我们仍然不能忽视IE6。
12. IE6下PNG透明度问题
关于IE6下PNG的透明度,以后会专门写一篇文章,敬请关注!!