兼容ie6的十条修复

2023年12月16日发(作者：)

我们知道ie会在一段时间内仍然流行，但是我们仍然可以支持浏览器并且避免hacks和条件css吗？这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。1、使用一个声明

你必须经常在html网页头部放置一个声明，推荐使用严格的标准。例如

或者xhtml使用

最后你需要是ie6进入兼容模式，这已经足够兼容的了。

2、使用position: relative

设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。

3、为浮动元素使用display:inline

浮动元素会有一个著名的ie6双边距margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。

4、设置元素启动hasLayout

大部分ie6（ie7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie内置的设定，确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout也是必须的。

5、修复重复字符的bug

复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。

a、确保浮动元素都使用：display:inline；

b、最后一个浮动元素使用margin-right:-3px;

c、在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释…

d、在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）

6、使用a标签完成可点击和hover原理

Ie6只支持a标签的css定义hover效果

你可以使用它去控制javascript启动的widgets，使得他们仍然保持键盘操作。这里有个二择一的问题，但是a标签是所有解决方案中最可靠的。

7、使用!important，或是高级选择符替代ie特定代码

在外置的css文件里，放弃凭借传统的hacks和条件判断，使用有效的css代码去针对ie6仍然是有可能的。例如：最小高度可以使用一下定义。

#element {

min-height: 20em;

height: auto !important; /* understood by all browsers */

height: 20em; /* IE6 incorrectly uses this value /*

}

Ie6不支持“min-height”并且错误的将20em重写为“auto”。不过，当内容大于设置的空间时，它会增加它的尺寸。

另外一个选择是使用高级选择符。例如

#element {

min-height: 20em;

height: 20em;

}

/* ignored by IE6 */

#element[id] {

height: auto;

}

8、避免百分比定义

百分比在ie下比较混乱。除非你非常小心每个父元素的尺寸，这样就大概可以最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如：

body {

margin: 2% 0 !important;

margin: 20px 0; /* IE6 only */

}

9、早点和经常测试

在你的网站和应用程序完成之前，不要放弃ie6的测试。问题将会更加严重并且需要很长时间去修复。如果你的网站可以运行于firefox和ie6，它将差不多肯定可以在其它浏览器下运行。

10、重构你的代码

经常的，修复会比重新考虑布局问题更加花费时间。Html细微的修改和更加简单的css经常是最有效的。这意味着你要放弃完美的合法的代码，但是将会更少的问题出现，并且你知道怎样处理将要出现的情况。

10个糟糕的IE Bug及其修复

国外有很多优秀的文章可以用来学习，我决定花些时间翻译。我并不知道这篇文章有没有人翻译过，原文名 10 Awful IE Bugs and Fixes，我希望能有更多人能看到这些优秀的文章。外国人很幽默，所以我也就全文翻了。高手绕道~

———-以下为译文———-

我列举了10个常见的IE bug和解决方法。我相信这将能够帮助你减少调试IE布局不一致时花掉的时间。

作者：kevin

简介

在处理IE方面每个人都有他们自己的故事。作为一个开发者我不得不面对大量的IE的古里古怪的问题并且有的时候你只是想用头撞墙。但是随着时间的推移，我们慢慢吃一堑长一智（有些时候那不是我们的错，是IE的错！）并且开始接受和理解IE的怪异行为。我们不得不这样因为仍然有数量可观的IE6用户。最好的做法是一开始就不断的从不同的浏览器测试你的网站。从一开始就解决布局问题要比在数千行html和css代码之后容易的多。

有很多运动在抗议IE6，支持它的是大多数web专家和看起来不怎么关心的普通用户。所以，我们现在能做什么？我们不得不继续挖掘来解决IE6的问题。但是，等一下，有一个振奋人心的消息。基于w3cschool的月度报表，IE6的用户这些年已经减少了一些。从2006年6月的60.3%到现在2009年9月的13.6%。按照这种比例，我们应该能在2010年年底的时候放弃IE6(译注：国外的情况还真是一片大好啊~。~)

好了，回到现实，我已经列出了全部我之前遇到的问题作为未来参考的列表。我相信这将能够帮助你减少调试IE布局不一致时花掉的时间。

1. IE6 幽灵文本(Ghost Text bug)

在我写本文之前，我遇到了这个bug。它相当的古怪和滑稽。一块不知哪来的重复的文本，被IE6显示在靠近原文本的下面。(译注：也可以参看Explorer 6 Duplicate Characters Bug获得bug演示)。我无法解决它，所以我搜索它，果然，这是另一个IE6的bug。

对此有许多解决方法，但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起来能解决这个问题。

但是，从Hippy Tech Blog那里了解到，问题背后的原因是由于html注释标签。IE6不能正确的渲染它。下面是他建议的解决方案列表：

解决方法

2. 相对位置和溢出隐藏(Position Relative and Overflow Hidden)

这个问题我遇到过很多次，当时我正在准备一个JQuery的教程，因为我使用了很多overflow

hidden来达到我想要的布局。

问题发生在当父元素的overflow被设置成hidden并且子元素被设置成position:relative。

使用标签包围注释

移除注释

在前浮动上增加样式 {display:inline;}

在适当的浮动的div上使用负边距

在原文本增加额外的 (比如10个空格) (hacky way)

CSS-Trick有一个很好的例子来演示这个bug。position:relative and overflow in internet

explorer

解决方法

为父元素增加position:relative;

3. IE的最小高度(Min-Height for IE)

这很简单，IE忽略min-height属性。你可以用下面的hack来修复它。感谢Dustin Diaz。

这个解决方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。

解决方法复制内容到剪贴板

代码:

selector {

min-height:500px;

height:auto !important;

height:500px;

}

4. Bicubic图像缩放(Bicubic Image Scaling)

你会喜欢这个的。IE那糟糕图像缩放让你很困扰？如果你拿IE和其他浏览器比较，IE缩小的图像看起来不如其他浏览器。

解决方法复制内容到剪贴板

代码:

img { -ms-interpolation-mode: bicubic; }

5. PNG透明(PNG Transparency)

我猜每个人都知道这个，但我仍把它列在这里，作为以后的参考。

所以如果你想要使用透明图像并且GIF不能给你想要的质量，你会需要这个对PNG的hack。你必须意识到，如果你使用一张PNG图像作为背景，你将不能设置背景的位置。

解决方法复制内容到剪贴板

代码:

img {

filter: progid:mageLoader(...);

}

6. IFrame透明背景 (IFrame Transparent Background)

在firefox和safari里你应该不会遇到这个问题因为默认情况下，iframe的背景被设置为transparent，但是在IE里，却不是如此。你需要用到allowTransparency 属性并且加入下面的CSS代码来达成目的。

解决方法复制内容到剪贴板

代码:

/* in the iframe element */

/* in the iframe docuement, in this case */

body {

background-color:transparent;

}

7. 禁用IE默认的垂直滚动条(Disabled IE default Vertical Scroll bar)

默认情况下，即使内容适合窗口大小，IE(译注：IE6/7)也会显示垂直滚动条。你可以使用overflow:auto，让滚动条只在你需要时出现。

解决方法复制内容到剪贴板

代码:

html {

overflow: auto;

}

8. :hover伪类(:hover Pseudo Class)

IE只支持元素的 :hover伪类。你可以使用jQuery的hover event来达到相同效果。

解决方法复制内容到剪贴板

代码:

/* jQuery Script */

$("#list li").hover(

function () {

$(this).addClass("color");

},

function() {

$(this).removeClass("color");

}

);

/* CSS Style */

.color {

background-color:#f00;

}

/* HTML */

• Item 1
• Item 2
• Item 3