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，請留個言。我會考慮我能做些什麼，或許還會添加到這份指南中。