搞定IE的最重要CSS技巧

衆所周知道,IE向來是我們在制作網頁時最難搞定的對手。但又迫于其用戶群數量之多,我們不得不想法設法搞定它。下面,將介紹的將是利用其特點而被發現/創造出來的CSS技巧。讓你輕松搞定這個難對付的家夥。

IE注釋:最安全的HACK IE的途徑

<!--[if IE]>

<link rel=」stylesheet」 type=」text/css」 href=」ie.css」 />

<![endif]–>

這應該是我最常用的方法了,一般情況下,我們現在已經不用考慮IE5或者以下的浏覽器了,這個注釋讓我們可以輕松HACK IE,並且它是最安全的方法,因爲別的浏覽器不會顯示/識別它(這裏應該感謝微軟的細心,即使他精粗心在先)。

至于IE8 beta,以其爲主浏覽器的用戶算起來應該不到K級,也暫時不是我們應該搞定的對象(當然,搞定它是最好不過的事)。或者我們應該把希望放在他正式版對CSS完美的支持,而現在我們把最重要的放在搞定IE6

/IE7,區分它們,我最常用的是下面的代碼:

#forieothers{...} // 用這個搞定IE7

*html #forie6{…} // 當然,這是寫給IE6的

而你需要注意的就是,別把它們的順序寫倒了,因爲#forieothers這個是會被IE6看到的,而根據CSS書寫順序的優先性,應該把讓*html #forie6寫在後面,讓浏覽器最終顯示它,但IE7又看不到。

讓IE6支持PNG透明圖片

#regular_logo

{

background:url(』test.png』); width:150px; height:55px;

}

/* \ */

* html #regular_logo

{

background:none;

float:left;

width:150px;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』test.

png』, sizingMethod=』scale』);

}

/* */

這並不是我喜歡的方法,不過,或許你會喜歡。當然,有時候,我們導出GIF圖片的時候,其效果和質量都可能不是很好,搞定PNG或許就是爲這個而做的吧。也可能是由于自己並不是畫圖的高手,所以,比較少用。

讓IE6支持min-width/max-width

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body.clientWidth < 600? 「600px」 :

document.body.clientWidth > 1200? 「1200px」 : 「auto」);

}

這應該是非常重要的技巧,也是比較常用的。就像,你以前可能用了太大的圖片,但現在又想用一個欄比較小的主題,這時,這個方法就顯得異常重要。抑或是,如果你想創建一個流體布局,這個代碼對你來說是必不可少的。

當然,這三個並不能讓你搞定所有IE的問題。不過,這應該是最重要的。IE注釋通常被CSS新手忽略,而IE6顯示透明PNG和IE6支持最小/最大寬度是難點。好吧,我想,看到這裏,或許你已經學會了,或者,至少知道這是解決方法。但或許還有一句話你應該記住:少罵IE,完善自己!

 
輕松搞定IE的CSS制作網頁技巧3則-css設計
衆所周知道,IE向來是我們在制作網頁時最難搞定的對手。但又迫于其用戶群數量之多,我們不得不想法設法搞定它。下面,將介紹的將是利用其特點而被發現/創造出來的CSS技巧。讓你輕松搞定這個難對付的家夥。IE注釋:最...查看完整版>>輕松搞定IE的CSS制作網頁技巧3則-css設計
 
IE安全設置的最優化
      IE安全的最優設置是一個很需要智慧的事情。一方面,你想把他設得足夠安全以讓你的網絡不被那些可以讓你的客戶在險惡的網絡中栽跟頭的間諜軟件侵入。另一方面,你的安全設置越是嚴密,你的網站就越有可能...查看完整版>>IE安全設置的最優化
 
10個常見的IE bug和解決方法-css設計
我列舉了10個常見的IE bug和解決方法。我相信這將能夠幫助你減少調試IE布局不一致時花掉的時間。 在處理IE方面每個人都有他們自己的故事。作爲一個開發者我不得不面對大量的IE的古裏古怪的問題並且有的時候你只是想用...查看完整版>>10個常見的IE bug和解決方法-css設計
 
IE中img多出5px的空白解決4種方法-css設計
嗯,開場先胡扯幾句不相關地感言。最近的工作讓我有了很多實踐的機會,同時也讓我收獲頗豐。在群裏聊天的時候也提到過,所有的學習過程,最好是理論-實踐-再理論-再實踐。。。的一個循環往複的過程。這裏說的理論...查看完整版>>IE中img多出5px的空白解決4種方法-css設計
 
用CSS控制IE下中英文字體顯示對齊
這是一個不太引人注意的問題,在IE浏覽器下面中英文字體混排的時候,常常會出現不對齊的情況。那麽疑惑又來了,是什麽導致了中英文偏差呢?!解決辦法又是什麽呢?!于是經過我測試發現兩種情況(當然有可能有更多導...查看完整版>>用CSS控制IE下中英文字體顯示對齊