css hack(underscore, alternate stylesheet, png...)

你或许已经设计出完美的网站，而且在所有的浏览器都测试过了，Firefox， Safari， Opera， Internet Explorer。我在考虑一个网站吗？我们都这么做过。在IE开始支持WEB标准之前，我们的网站在IE上浏览的时候几乎看起来都像废物一样。那是很无奈，因为（不幸）Internet Explorer是最受欢迎的浏览器。那你应该如何是你的网站在所有的浏览器中都保持使用标准的同时让它在IE也看起来很正常。

我不是网页设计的专家，但是在过去几年我学习到一些技巧 。如果你能跟着我的指南并且在实际中随处尝试实际写一些代码，你能写出一个在所有的浏览器包括IE中看起来都一样的网站，同时它也能通过测试。惊讶吧！那你还等什么？开始写代码吧。

首先声明，所有的这些hack都是对应CSS的。如果你不是使用CSS，也不想写出符合标准的代码，那么你来错地方了。CSS在今天是在网页中用于设计的方法，同时你也应该使用它。我并不打算告诉你CSS是如何工作的，所以我假设你了解它。如果你不了解CSS的话，那么你应该先去看看指南，然后回到这里。
IE中的特殊代码

在IE最常见的问题最常见的问题是他做起一些事情来完全不同于其他浏览器。因此，为了结局这个问题，你必须明确的告诉IE应该做些什么。现在有两种方法（我认为）能解决这个问题。一个是下划线hack（underscore hack），另外一个是使用一份可选择的样式表（a alternative style sheet hack）。每一项技术都有他们的优点和缺点，但是最终他们都达到同样的效果。
下划线Hack

如果你只是在少量细微的地方需要调整，那么下划线Hack 将会特别有用。t’s also useful since you can keep your IE CSS with the real CSS, making it easier for adjustments down the road.现在你或许开始了解下划线hack的工作原理了。

假设有一个类（class）叫做text，你想为这个text类设置10个像素的外补丁（margin）。这个10像素的外补丁在所有的浏览器看起来都正常，唯独IE看起来有问题。为了是IE看起来也正常，也许你希望专门为IE设这个外补丁为15像素。为了达到这个目的，你就需要写一段只有IE认识的代码。像下面这样做：

.text {margin: 10px; _margin: 15px;}

这个hack之所以能正常工作是因为IE太愚蠢了。下划线在CSS中扮演的角色是为一个属性的注释，所有的浏览器都这么认为的，唯独IE尊敬它。因为IE并不遵循下划线的规则，所以当在一个正确的属性下面再写一个带下划线的属性的时候，IE是重新定义属性，但是其他浏览器却会忽略第二条重定义的属性。

（译者注：也就是说像上面的代码，只有IE能读出_margin:15px， 也就是重定义margin为15像素，但是其他浏览器只不认识_margin:15px这个语法，所以其他浏览器设margin为10像素。）
可选的层叠样式表（CSS）

多个原因使这个“hack”是我的最爱。专门为IE写一个分离的样式表，可以让这些丑陋无效的代码原理你的其他浏览器。这个专门的IE样式表同时也保持你真正的代码的整洁干净。最主要的还因为它相当简单。

要使用这个可选择的IE样式表，第一件事你需要做的是在你的HTML头部增加额外的一行指向IE样式表。一般你要做的是添加第二个样式表，同时使用一个有条件的CSS注释使这个样式表只对IE浏览器生效。完成第二个样式表的代码如下：

<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” mce_href=”style.css” />

<!–[if IE]><link rel=”stylesheet” type=”text/css” media=”screen” href=”ie.css” mce_href=”ie.css” />< ![endif]–>

需要注意的是这个专门的IE样式表需要出现在原始的样式表之后。这样一来IE的专门CSS将会覆盖掉真正的CSS的值。完成这个可选择样式表的方式是创建一个新的CSS文件，改名为“ie.css”，然后把所有的专门为IE写的代码都放到里面。你不需要为这些代码多任何特殊的事情，只需要把它们看作是一般的CSS文件对待即可。

从现在开始，我将假设所以的你使用的IEhack是将会放到一个叫ie.css的文件里面。如果你不想使用这个可选的样式表，那么你可以使用下划线 hack的方式修改余下的hacks，但是这么一来就产生了多余的无用代码等等。所以呢，最好的还是为这些剩下的用于兼容IE的代码写到一个可选择的样式表里面。

（译者注：这个方法跟上面的第一个方法一样，都是使用一个只有IE浏览器才会知道的方式来让IE浏览器覆盖一些属性以达到兼容的目的。）
透明PNG图片

如果你曾经在IE里面使用过透明的PNG图片，那么你应该知道这些图片显示出来并不是透明的。你认为应该是透明的地方将会是丑陋的灰色北京。那么你应该如何处理呢？用GIF图片？No, because GIFs just plain suck for everything, and aren’t good for higher resolution images. No, because sometimes browsers will render colors differently, screwing up the blending. 那么你应该怎么做呢？使用一个简单的CSS hack。

谁会想过一个CSS hack能修复一个IE的主要瑕疵呢，但是这确实可以做到。其实这个不算是一个CSS hack，但是却与CSS有联系。和这个关联的是一个.htc文件。我不打算详细介绍它是然后工作的，如果你想了解更多内容的话你可以到Microsofe’s Developer Network阅读相关的内容。你需要知道的是如何设置这个文件。

你需要两个文件。一个HTC脚本和一张透明的GIF图片。我已经准好这个两样东西了。诚实地告诉你这个脚本并不是我创建的，而是Aaron Porter创建的。现在很不幸的是我下载这个文件是很久很久以前，我也不知道在什么地方找到这个文件的，或者我也不知道Aaron Porter究竟是何人。所以如果有人知道这个HTC脚本源文件的话，请告诉我一声。我会把这个文件放回原处的。

现在你把你下载到的这两个文件上传到你存放ie.css文件的目录，然后我们需要添加一行简单的CSS代码：

img.pngfix { behavior: url(pngHack.htc); }

现在你把这个pngfix类添加到你期望在IE中显示透明的PNG图片的属性里面
IE的最大宽度

如果你曾经尝试使用max-width这个CSS属性的话，你应该知道IE并不支持它。现在一些WEB开发者尝试避免使用这个属性，但是我并不是其中一员。最大宽度对我来说是一个非常有用的CSS属性，现在我就准备使用这个属性。那么你应该如何让IE使用max-width呢？当然是使用IE的特殊代码！

添加一行简单的CSS到ie.css。添加这一行到你平常使用max-width的class和id里面。

.class { width: expression(this.width > 533 ? 533: true); }

当然你要修改533为你希望使用的最大像素值，就这么简单而已。
总结

我希望这份指南能帮助你试你的网站在IE表现得更好。我知道还存在很多其他的IE hack，但是这里提到的是我认为最有用的。如果你认为我遗漏了一个重要的hack，请留个言。我会考虑我能做些什么，或许还会添加到这份指南中。