驯服IE6野兽的权威指南

多年来，Internet Explorer 6 (IE6)一直是世界各地网页设计师的生存之忧。设计人员和用户都开始享受火狐、Opera和Safari等现代优秀浏览器日益可预测的、符合标准的行为。与此同时，IE6继续困扰着我们设计，潜伏在黑暗的地方声誉会死，而且是一种痛苦缓慢，痛苦的死亡。< / p >

当我们等待着IE6像网景4一样消失的那一天的到来时，让我们记住那些濒临灭绝的用户，不管出于什么可悲的原因，他们仍在用这个可怕的浏览器野兽折磨自己。< / p >

所以现在，让我们用这份驯服IE6野兽的权威指南来庆祝IE6的最后几天。< / p >

在这篇全面的文章中，您将学习一些支持IE6的最佳方法，包括适当的目标定位、特定的hack、图像支持、框模型、浮动以及介于两者之间的一切。

针对IE6使用条件注释

条件注释在使IE6正常运行方面起着重要作用。条件注释基本上是包含在(X)HTML标记中的代码片段，它使您能够针对或筛选特定版本的Internet Explorer。下面是一个针对IE6的有条件注释，它有一个特殊的消息:< / p >

<！——(如果IE6) >< p >哦!
看来你还在用ie6 !你应该得到更好的!< / p ><！(endif)——>

这是一种只向IE6交付代码和内容的非常有用的方法。其他浏览器会将这个条件注释视为普通的(X)HTML注释，并直接忽略其内容。因此，在为IE6调整我们的网页时，条件注释使我们能够直接应用CSS样式，而不干扰其他浏览器。尽管条件注释是微软的专利发明，但它们可以说是“入侵”特定版本ie的最佳方式。< / p >

使用条件注释来瞄准并仅将样式应用到IE6的最简单方法是在< >头网页的部分:< / p >

<！——[if IE6]>  

然后,在ie6.css样式表中，我们放置了所有IE6特定的技巧和其他为了适应IE6而需要的技巧。这使我们能够将IE6样式合并到一个样式表中，而其他所有浏览器都完全忽略了这个样式表。有了这种将样式应用到IE6的方法，就不需要针对IE6的特殊攻击，如所谓的“star-HTML”攻击或下划线攻击。选择器只是从仅适用于ie6的样式表中“按原样”定位。< / p >

当然，条件注释可以做的比针对IE6多得多。根据设计，它们能够针对HTML和XHTML筛选任何版本的Internet Explorer。关于有条件评论的更多信息，强烈推荐以下优秀文章:< / p >< ul ><李>微软解释条件注释

在QuirksMode了解更多关于条件注释的信息

让你的头脑沉浸在条件评论中

目标和过滤IE6与“内css”hack

尽管条件注释很有用，但在某些情况下，您可能会决定应用特定于ie6的样式在样式表。这方面的一个很好的例子可能发生在网站开发过程中，当时使用单一样式表更方便和实用，其中IE6样式位于“正常”样式旁边，以便比较。一旦开发完成，所有的“css内”hack都可以合并到一个通过条件注释包含的IE6样式表中。< / p >

幸运的是，当涉及到IE6时，这些css内的定位方法并不缺乏。< / p >

多年来，这些“hack”中的一些已经上升到堆的顶端，被证明是非常有用和有效的针对IE6。这些css内技术中使用最广泛的可能是“star-HTML”hack:< / p >

/*目标IE6 */* html#选择器{颜色:红色;｝

虽然标准兼容的浏览器忽略了这个不合逻辑的选择器，但IE6却认为它是合法的，尽管如此< html >是文档树中最高的元素。这使我们能够将CSS样式专门应用于IE6而不干扰其他浏览器。最好的是，这种针对IE6的方法是完全有效的。< / p >

也有一些情况我们需要隐藏IE6的风格。下面的方法被称为“子选择过滤器”，它使我们能够将CSS样式应用于所有浏览器除了IE6:< / p >

/* filter IE6 */html >身体#选择器{颜色:红色;｝

这个选择器也是完全有效的，并且很容易被所有符合标准的浏览器应用。它之所以有效，是因为IE6根本不理解它的含义。< / p >

针对和过滤IE6的其他有用方法包括重要的!当你需要覆盖IE6的属性值时，它很有用:< / p >

#selector{宽度:200px重要的!；/*目标其他浏览器*/宽度:100 px;/*目标IE6及以下版本*/｝

当一个选择器有两个相同的属性时，IE6将应用第二个属性，即使第一个属性包含重要的!指令。其他浏览器当然会应用重要的!声明，使我们能够针对IE6使用后续规则。< / p >

启用alpha透明PNG支持

IE6最令人沮丧的缺点之一是缺乏32位的alpha透明PNG支持。当显示32位alpha透明PNG时，IE6将所有透明替换为丑陋的灰色背景。幸运的是，这是一个众所周知且经常被提及的问题，对此有各种各样的变通方法和解决方案。< / p >

除了完全避免使用alpha透明的PNG图像之外，也许确保与IE6视觉兼容性的最简单方法是坚持使用完全透明的PNG图像，它在所有浏览器(包括IE6)中都得到充分支持和正确显示。< / p >

一个更实际的方法是通过8位PNG格式，而不是通常的32位格式。< / p >

为此，请使用Adobe Fireworks (Photoshop不能用于此目的)等程序，将透明的PNG图像保存为8位格式，然后像往常一样包含在设计中。8位png可能看起来没有32位版本那么好，但是它们的alpha透明度在IE6中优雅地降级为完全的索引透明度。这种方法使您能够在所有现代浏览器中使用alpha透明，而不会在IE6中出现难看的灰色背景。< / p >

当然，也可以启用ie6对32位alpha- transparent的支持。有许多不同的脚本支持这种功能，但它们最终都依赖于专有的MicrosoftAlphaImageLoader过滤器可能包括在您的CSS文件如下:< / p >

* HTML .iepngfix {行为:url (iepngfix.htc)；｝

要做到这一点，你需要上传这两个文件到与CSS文件相同的目录。第一个文件是空白的gif第二个文件是一个HTC脚本，它为IE6(及以下版本)提供32位alpha- transparent所需的功能。< / p >

这是最基本的实现AlphaImageLoader过滤器，但使用各种各样的免费脚本也可以实现更高级的功能。以下是我最喜欢的一些:< / p >< ul ><李>DD_belatedPNG

单位PNG修复

TwinHelix IE PNG修复

IE的PNG修复的综述

修复损坏的盒子模型

早期版本的Internet Explorer错误地解释了框模型，在计算内容宽度时将边框和填充包括在内。例如，考虑以下情况:< / p >

Div{边框:10px纯黑色;填充:10 px;身高:100 px;宽度:100 px;｝

在现代浏览器中，这种划分的高度和宽度都根据W3C规范计算为100px + 20px + 20px = 140px．然而，在IE的早期版本中，高度和宽度都被不正确地计算为100 px．< / p >

这种差异导致了符合标准的浏览器和较老版本的Internet Explorer之间的许多设计不一致。< / p >

幸运的是，破碎框模型在IE6中得到了解决，它能够为包含完整的<！DOCTYPE >．当一个完整的<！DOCTYPE >存在时，IE6切换到“标准兼容模式”或“几乎标准兼容模式”，这两种模式都会导致IE6正确地解释盒子模型。相反，当一个完整的<！DOCTYPE >不包含在网页中，IE6就会返回到“怪癖模式”，并错误地解释框模型。< / p >

因此，通过在IE6中包含一个完整的<！DOCTYPE >以符合标准的模式进行设计。< / p >

如果您需要在怪异模式下工作，下一个最简单的解决方法是避免在您已指定宽度的元素上应用填充或边框。您可以始终对所括的元素应用填充和/或边距。< / p >

即使使用这些解决方案，也可能存在需要控制特定元素的高度和宽度的情况。在这些情况下，我们可以使用“Tan Hack”来完成工作:< / p >

#选择器{边框:10px纯黑色;填充:10 px;身高:100 px;宽度:100 px;} * HTML #selector {\高度: 140 px;/*针对IE5和IE6的怪异模式*/他\锁定宽和高: 100 px;/*针对IE6的标准模式*/\宽度: 140 px;/*针对IE5和IE6的怪异模式*/w \ idth: 100 px;/*针对IE6的标准模式*/｝

在第一组规则中，我们将宽度和高度应用于所有符合标准的浏览器。< / p >

然后，在第二组规则中，我们通过调整高度和宽度的值来考虑IE5和IE6怪癖模式中的破碎框模型，以包括额外的填充和边框宽度。这相当繁琐，所以希望代码和注释能够阐明该技术。< / p >

修复min-width/max-width和min-height/max-height

开箱即用，IE6无法理解最大和最小高度和宽度。这对于设计师来说是非常悲哀的，因为许多布局场景都需要这些属性才能正常工作。在现代标准兼容的浏览器中，我们可以使用以下CSS来实现我们的目标:< / p >

Div.max-height {max-height: 333px;} div.min-height {min-height: 333px;} div.max-width {max-width: 333px;} div.min-width {min-width: 333px;｝

当然，这是那样的tooo对于ie来说很容易，因为它完全不能理解CSS的这些基本属性。< / p >

幸运的是，IE支持自己的、专有的表达式属性，它使我们能够使用JavaScript表达式操作(X)HTML文档属性，如max/min-width和max/min-height。方法指定宽度属性值表达式属性，我们可以这样使用:< / p >

div{宽度:表达式(333 +“px”);｝

．．这相当于:< / p >

Div{宽度:333px;｝

使用IE有两个缺点表达式属性。首先，由于表达式本质上是JavaScript，当JavaScript在用户的浏览器中被禁用(或丢失)时，表达式就会失败。< / p >

其次，使用CSS表达式来表示最小/最大属性非常消耗资源，可能会对浏览器性能产生负面影响。尽管如此，最大/最小宽度/高度的设置仍然是网页设计师工具箱中的一个重要工具。考虑到这一点，下面是一些有用的CSS表达式，可以在IE6中实现完整的最小/最大功能。< / p >

max-width

/* max-width for IE6 ** HTML div.max-width{宽度:表达式(document.body。clientWidth > 776 ?“777 px”:“汽车”);｝/*标准兼容浏览器的max-width */Div.max-width {max-width: 777px;｝

min-width

/*最小宽度为IE6 */* HTML div.min-width{宽度:表达式(document.body。clientWidth < 334 ?“333 px”:“汽车”);｝/*标准兼容浏览器的min-width */Div.min-width {min-width: 333px;｝

max-height

/* max-height for IE6 */* HTML div.max-height{高度:表达式scrollHeight > 332“333 px”:“汽车”);｝/* max-height */Div.max-height {max-height: 333px;｝

最小高度

幸运的是，在IE6中应用最小高度时，我们可以跳过疯狂的JavaScript/CSS表达式。多亏了达斯汀·迪亚兹，我们可以最小高度在IE6中使用这一小块有效的CSS:< / p >

/* min-height for IE6 */Div.min-height {min-height: 500px;高度:汽车重要的!；身高:500 px;｝

杀死双边距错误

大多数做过一段时间网站设计的网页设计师都熟悉IE6的“双浮动边距错误”。每当浮动一个元素(例如< div >)，然后在同一方向加上边距。例如，如果我们这样做:< / p >

Div {float:右;margin-right: 10 px;｝

．．IE6将(通常)双边距的大小要20 px没有任何明显的原因。不用说，这个双页边距的错误已经破坏了许多优秀的网页设计，造成了许多痛苦和苦恼。< / p >

幸运的是，这个bug很容易被杀死。< / p >

只需将浮动元素的显示类型更改为块来内联,如下所示:< / p >

Div #选择器{float:右;margin-right: 10 px;} * HTML div#选择器{显示:内联;/* kill double-margin bug */｝

这在99%的情况下解决了双边距错误。对于那些罕见的，无法解释的情况下，这个修复不工作时，您可能需要通过删除边距并对父元素或浮动元素本身应用填充来解决这个问题。< / p >

明确你的浮动

清除浮动是另一个常见的布局挑战，不仅对IE6如此，对许多现代浏览器也是如此。在理想情况下，包含浮动元素的元素将完全包含该元素。然而，在不完美的浏览器世界中，浮点数经常出现不完全关闭。< / p >

当发生这种情况时，我们说被浮动的元素还没有被它的父元素“清除”。幸运的是，在IE6和其他浏览器中也有几种简单的方法来清除浮动。< / p >

清除浮球的最古老的方法之一是使用clearfix黑客．这种CSS技术的工作原理是使用CSS在父元素之后生成内容:在伪类。< / p >

然后生成的内容用于清除被浮动的元素。下面是一个典型的例子:< / p >

.clearfix:在{内容:" ";显示:块;高度:0;明确:;可见性:隐藏;} .clearfix {display: inline-table;｝/*隐藏IE-mac \*/* HTML .clearfix{高度:1%;}.clearfix{显示:块;｝/*结束隐藏IE-mac */

要使用此方法清除浮动，请将其放入CSS文件中并更改所有实例.clearfix到需要清除其浮动祖先元素的选择器。< / p >

清除浮动的另一种CSS方法是简单地浮动容器元素。例如，如果将图像浮动到容器中< div >，简单地应用以下CSS:< / p >

Div{浮动:左;｝

然后，如果包含元素的行为需要像一个普通的块元素一样，应用宽度为100%来强制在下一个元素之前换行:< / p >

Div{浮动:左;宽度:100%;｝

到目前为止还不错，但也有个平局更好的清除浮动的方法。< / p >

只需应用溢出值添加到容器< div >，它将自动垂直展开并清除它的浮动子对象。下面是一个例子:< / p >

Div.container{溢出:隐藏;宽度:100%;｝

的宽度声明是Internet Explorer和Opera需要的，但不需要设置为100％；相反，您可以根据需要使用任何宽度和度量单位。如果你不想指定a宽度，你可以指定一个高度代替。< / p >

为溢出属性，您可以使用以下三个值中的任何一个:< / p >< ul ><李>汽车-显示滚动条如果内容超过指定的宽度

隐藏的即使内容超过了宽度，也不要显示滚动条

滚动-总是显示滚动条，即使他们不是必要的

该方法不仅适用于清除浮动元素，而且在某些情况下溢出属性会干扰设计的其他方面。如果出现这种情况，您可能想尝试使用overflow-x:隐藏;或overflow-y:隐藏;．记住,宽度属性可被替换为高度．< / p >

修复其他IE6常见问题

最后，让我们回顾一下IE6常见的其他一些问题。这些问题及其相应的解决方案相当简单，所以我将省去冗长的谩骂，直接切入正题。在继续阅读本文时，请记住应该将任何特定于ie6的hack重新定位并合并到特定于ie6的样式表中，它应该通过条件注释包含进来(参见上面的第一节)。< / p >

修复相对定位

使用位置:相对这可能是在IE6中最容易把事情搞砸的方法。现代浏览器显示相对位置的嵌套元素没有问题，但IE6经常在稍微复杂的布局上卡住。幸运的是，解决方法就像触发一样简单hasLayout通过添加变焦:1;对每个相对位置的元素:< / p >

.selector {位置:相对；} * HTML .selector {变焦:1；｝

注意，你不应该申请变焦:1;到任何内联元素。这样做会导致IE6将它们视为块元素。< / p >

对于下面的解决方案也要记住这一点。< / p >

解决负利润

负边距在各种情况下都很有用，大多数浏览器处理它们都没有任何问题。不幸的是，IE6不喜欢负边距，除非你对目标元素应用相对定位:< / p >

.selector{保证金:-1.5 em；} * HTML .selector{位置:相对;变焦:1;｝

注意添加的变焦:1;声明，这是必需的，因为相对定位。不是IE很棒吗?< / p >

解决溢出问题

使用溢出在IE6中，有时会导致意想不到的、无法解释的显示问题。幸运的是，我们可以解决很多问题溢出触发相关的显示问题hasLayoutVia -是的，你猜对了-变焦:1;．下面是一个例子:< / p >

.selector{溢出:隐藏}* HTML .selector {变焦:1；｝

另一个奇怪溢出观察到的相关问题字体样式:斜体;扩展其父元素的宽度。< / p >

值得庆幸的是，通过对父元素应用以下CSS，这种细微差别很容易解决:< / p >

* HTML .selector {overflow-x:隐藏;｝

对齐浮动元素

当浮动宽度固定的元素时，它们将水平对齐以适应父元素的宽度。至少，它在大多数浏览器中是这样工作的。在IE6中，浮动项不会以直线显示，而是看起来是直线降压的以奇怪的，像楼梯一样的方式。< / p >

幸运的是，有两种方法可以解决这个问题。第一个是应用行高:0;父元素的声明:< / p >

.selector {float: left;宽度:100 px;明确:没有;} * HTML .selector {行高:0；｝

或者，您可以通过应用显示:内联;对浮动元素的声明:< / p >

.selector {float: left;宽度:100 px;明确:没有;} * HTML .selector {显示:内联；｝

修改列表项

最后，如果IE6决定添加一组额外的列表项(<李>)在你的清单之后(< ul >)，添加一个HTML注释已经神奇地解决了这个问题。以下是你的源代码在应用修复之前和之后的样子:< / p >

之前:

Firefox 
Opera
 
Safari
 
Internet Explorer
  
Internet Explorer
 
Internet Explorer

后:

 
Firefox
 
Opera
 
Safari
 
 ie 
<——IE6 fix——>< / ul >

在关闭

有了本文中描述的CSS技巧，您就可以很好地驯服IE6猛兽，并在显示网页时让它正常运行。是时候让你的下一个设计与IE6兼容，请参考本权威指南，以获得最常见的IE6问题的明确解释和解决方案。当然，如果你有更多的技巧、想法、评论或问题，一定要在评论区说出来!< / p >

相关内容

• IE 6中的JavaScript调试技术
• 采取“这真的重要吗?”哲学
• 学习CSS3的20个有用资源
• 相关类别: CSS和Web开发