IE7推出了，所以我覺得有必要要把現有的CSS相關問題放在這裡。
昨天跟老弟聊到瀏覽器，忍不住就要好好的抱怨一下微軟。IE大概是我們兩個公認不可多得的爛軟體，之所以它的市佔率會這麼高，純粹就是因為它的強迫性；微軟一直以來就是利用人類的懶來造就今日的市佔率，在買電腦就內建Windows系統的情況之下，誰還會想要花時間去安裝別的系統？哼，要不是魔獸世界不能夠在Linux上面玩，我早就棄Windows到垃圾桶去了…
IE也是一個相當不求進步的瀏覽器，最讓人家詬病的就是，它根本不把網頁標準化當成一件重要的事，直到現在，還是選擇性的遵循自己腦子裡想的標準化，因此造就了網頁開發者的麻煩以及更多跨瀏覽器的問題。
我絕對不認為FireFox是完美的瀏覽器，但是它起碼不會像IE一樣，改得那麼被動，更不用驗證是否正版，隨便下載隨便安裝，壞了就輕輕鬆鬆移除重安裝即可。更鳥的是，改版後的IE居然還沒有溯及既往的能力，好像推出新版就可以當作自己過去拉的屎都不算數一樣，才會造就現在瀏覽器問題一大把的亂象，馬的IE你可不可以改進一下啊！
先講CSS Hack存在的理由，最主要的就是為了要解決各個瀏覽器（尤其是IE）對於標準化支援程度不同所產生的CSS問題，有時候必須要針對特定瀏覽器來撰寫適合的樣式表，這就是為什麼我們必須要深入研究CSS Hack的原因。
I. Conditional comments
這是一個非常實用的語法，可以幫助你根據不同的瀏覽器來選擇所需要的CSS，主要有兩種方法：Positive 與 Negative。Positive會將裡面的語法，顯示給「符合條件的瀏覽器」；Negative 則是會將裡面的語法，顯示給「不符合條件的瀏覽器」。
Positive： <!--[if condition]> HTML <![endif]-->
Negative： <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
condition的部份則可以使用下列的設定：
- IE**************任何版本的IE
- lt **************IE version 比version還要少的IE版本
- lte *************IE version 比version少或是相同的IE版本
- IE version ******只針對與指定version相同的IE版本
- gte IE version ***大於或是等於指定version的IE版本
- gt IE version ****大於指定version的IE版本
version就是IE的版本，通常為5、5.5、6 或是 7；至於HTML的部份當然就是放入你的HTML語法了。
在Negative的部份，如果你的condition是IE，那麼「<![IGNORE[--><![IGNORE[]]>」可以被取代為「-->」；還有，<![IGNORE[ ... ]]>這玩意ㄦ，在XML裡面是不被允許的語法，也就是說，在XHTML當中它是不合乎規範的語法，解決方式是把它分成兩個conditional comments ，就像這樣：<!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]-->。
參考範例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<link href="all_browsers.css" mce_href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" mce_href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" mce_href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" mce_href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" mce_href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
<body>
<p>Test</p>
</body>
</html>
II. in-CSS Hack
大部份IE在CSS的bug通常是關於選取器的部份，以下的部分條列出IE各個版本瀏覽器對於選取器的支援項目：
- IE 6 and below
* html {} - IE 7 and below
*:first-child+html {} * html {} - IE 7 only
*:first-child+html {} - IE 7 and modern browsers only
html>body {} - Modern browsers only (not IE 7)
html>/**/body {} - Recent Opera versions 9 and below
html:first-child {}
III. Minimized attribute selectors
這個項目，在各大瀏覽器裡面可以說是沒有一個統一的準則，假設你有一個<input disabled>的標籤，那麼input[disabled=”disabled”] {}就可以將所有<input disabled>的標籤給選出來，但是就像我講的，目前瀏覽器好像或多或少都有點差異在。以<input type=”hidden” disabled id=”attrhack”><p>Test</p>為例子，產生了下列的結果：
#attrhack[disabled=””]+p {}
Firefox 1.5 以及更早的版本，未來的版本也許也支援
Safari 2.0 以及更早的版本，未來的版本也許也支援
Konqueror 3.5 以及更早的版本，未來的版本也許也支援
#attrhack[disabled=”true”]+p {}
Opera 9 以及更早的版本，未來的版本也許也支援
不過minimized attribute selectors只能在HTML當中運作，不適用在XHTML的檔案當中。
IV. !important
在CSS樣式檔中，遇到相同的屬性時，只要在新的屬性值中加入!important，即使優先權較低，有加入!important的屬性質仍會被優先使用。例如：color:red !important; 這時即使優先權較低，文字也會變成紅色。
但是IE6版本以下的瀏覽器，遇到!important的時候會產生無法辨識的錯誤，因此不會優先採用，故有的開發人員會使用這種方法讓IE6呈現屬於自己的樣式檔案，不過這個問題在IE7當中已經被修正了，以下是針對IE6的樣式表隱藏方式：
<style type="text/css">
p{
background: green !important; /* 除了IE6以及更早版本外的IE瀏覽器，現行瀏覽器都會優先使用本項設定*/
background: red; /* IE6以及更早版本外的IE瀏覽器因為忽略上面的!important設定，因此會用這個覆蓋先前的設定*/
}
</style>V. @import “non-ie.css” all;
這是另外一個我們常用的IE樣式隱藏方式，也是我之前所使用的方式。IE7以及更早的版本不支援@import裡面媒體選擇的語法，所以我們可以使用：@import “stylesheet.css” all; 來對IE隱藏樣式表，不過這項bug未來可能會被修正。
下面列出各個瀏覽器對於@import的支援
| 支援, 作用Applied By | 不支援,作用 Not Applied By |
當機 Hang , Crash | |
@import url(cooldog.css); @import url("cooldog.css");註: 有沒有 ” quoes作用的瀏覽器差不多,多了蘋果 Mac IE 4.01 , Mac IE 4.5 不作用。 |
|
|
Win NS 4.0 – 4.04 This causes Netscape to hang. Browser must be closed |
@import url(cooldog.css) all; |
|
|
VI. body[class|=”page-body”]
CSS2.1關於連字號的使用定義並沒有很清楚，基本上，針對<body class=”page-body”>的標籤，使用body[class|=”page-body”]選取器，在IE7以及其他現行瀏覽器上面都是可以被辨識的，除了Opera以外。雖然未來Opera有可能會修正自己的規則以符合其他的瀏覽器，但是起碼目前Opera 8以及9是存在著這樣的問題的。
p{
background: red; /* 所有的瀏覽器都可以接受*/
}body[class|="page-body"] p{
background: green; /* IE7以及其他的現行瀏覽器可接受，除了Opera以外 */
}
就是愛程式 
非常有用的資訊啊…
正被IE7折磨中…
以前寫一份css分別針對火狐和ie6.0，
現在連ie7.0都要顧慮…
真是要我命…
沒錯，跨瀏覽器這件事情，真的是令人頭大啊！:D
魔獸世界可以在Linux下玩喔.
所以，請把 win 丟到垃圾桶去吧 XD.
$os = ‘windows’;
str_replace(‘win’,$os)
阿哈哈！我現在已經準備把win丟到垃圾桶當中了，開心中～:D
想詢問一下您歐~
我覺得您對網頁的概念相當了解，
我想詢問專家您ㄉ意見
您覺ㄉ目前網頁最容易發生的問題
例如 版面 速度 等等
而可以用CSS大力解決ㄉ
而且是一般使用者最注重的會是哪些問題ㄋ
TO SONIA：
我不是專家喔～我只能提供一些我自己個人的想法給您而已…:D
以台灣網頁來講，我認為最容易存在的問題就是版面內容不懂得取捨，造成大量的資料同時出現在網頁上，這歸咎於網站規劃時，不了解過多的資訊對使用者而言等於沒有資訊。
過多的資料最直接所引發的問題就是網頁速度變慢，如果又加上Javascript的特效，可以說是慢上加慢。
網頁標準化以及CSS固然能夠對網頁效能做一定程度的提升，但是他所能做的也就是降低不必要的Loading，卻不能減少大量資料的載入。
CSS與標準化技術能夠對網頁SEO以及後續維護產生最顯著的加分與提升，如果配合樣板引擎將HTML與程式完全分離，後續的維護和改版可以說是易如反掌，程式碼精簡，當然就會順便提升一點效能，但是要做到好，第一次的撰寫時間會較長，因為標準化作業需要縝密的規劃與前置作業。
另外一個台灣目前網頁很容易發生的問題就是特效用很多，IE上面看起來很美，卻完全沒有考慮到跨瀏覽器的問題，蔑視IE以外的網路用戶，是台灣普遍的心態；更糟糕的是，無論技術還是設計都遷就IE6這個不管是在CSS解讀或是各方面呈現都屬於不及格的瀏覽器，被IE綁著而無法使用對使用者和搜尋引擎而言更友善的設計，這是很多網站相當大的失敗。
對一個使用者而言，他對一個網頁最注重的是什麼？很簡單，給他們要的東西，其他不要多給，更不要給一大堆然後造成網頁變慢。
PChome的購物中心、露天拍賣的新網站、PayEasy、甚至Yahoo購物中心都有犯了類似的毛病，大公司或許能夠增加機器讓網頁不要太慢，但是依然沒有解決資訊過多令使用者茫然的缺點。
適當的分類、簡單清楚的引導使用者的慾望及瀏覽方向、在對的地方需要的時候提供給使用者資訊，這樣才能夠讓使用者更樂於使用這個網站。
不過我知道，這些網站老是放堆資料的原因是要賺廣告費～XD
Anyway，網站經營者要注意的是，CSS和網頁標準化絕對不是網頁效能的萬靈丹，但是他是必然要走的趨勢，千萬不要等到HTML5都正式啟用，搜尋引擎規則大翻盤了以後才急著想要標準化，標準化工作需要時間，並不是隨便用DW拉表格就可以完成的，因為它牽涉到的不只是視覺而已，不能把它當成設計作業來看待喔～
囉唆一堆，好像也沒有講得很詳細，不過這些問題應該都可以寫成研究報告了吧～短短幾行也只能膚淺的提到，不好意思咧～:P
Pingback: 台灣人愛打拼
分享我的做法給您參考，每次要寫一堆class太累了，所以我想辦法整合到一個class中囉
http://amos-lee.blogspot.com/2009/05/ie8-css-hack.html
Pingback: [網站] 好站連結 (七) Android, javascript, Css, PHP, Perl, FreeBSD, Linux | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY