css hack 收集 2

前言

每次要找個東西都得慢慢去翻自己收集的一些東西,每次都是那麼花時間,再加上有時存放時間久遠就忘了當時是存在哪了,為了方便查詢及閱讀,決定把一些Css Hack 收集起來...

1.區別不同瀏覽器，CSS hack寫法：

區別IE6與FF：background:orange;*background:blue;區別IE6與IE7：background:green!important;background:blue;區別IE7與FF：background:orange;*background:green;區別FF，IE7，IE6：background:orange;*background:green!important;*background:blue;註：IE都能識別*;標準瀏覽器(如FF)不能識別*；IE6能識別*，但不能識別 !important,IE7能識別*，也能識別!important;FF不能識別*，但能識別!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

另外再補充一個，底線"_",IE6支援底線，IE7和FF均不支援底線。
於是大家還可以這樣來區分IE6，IE7，FF: background:orange;*background:green;_background:blue;
註：不管是什麼方法，書寫的順序都是FF的寫在前面，IE7的寫在中間，IE6的寫在最後面。

 

2.!important

隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>

3.IE6/IE7對FF

1.*+html 與 *html 是IE特有的標籤, firefox 暫不支援.而*+html 又為 IE7特有標籤.<style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */}</style>2.表達方式：+property:value測試環境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2測試結果：IE5，IE6 ，IE7瀏覽器識別；FF2.0，Opera 9，Safari 2瀏覽器不識別。結論：我們可以用"+"來實現只有IE識別的CSS Hack。比如我們要實現在IE中500px的寬度，而在其他瀏覽器480px的寬度，就可以通過"+" Hack來完成，如下：#hack {width:500px;+width:480px; /*only IE*/}3.用於內聯css##wrapper  {height:20px;   /*For Firefox*/*height:25px;  /*For IE7 & IE6*/_height:20px;  /*For IE6*/}5.IE7的hack>bodyhtml**+html這三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準相容瀏覽器中被被忽略，但是 IE7 卻不這麼認為。 對於 >body ，它會將缺失的選擇符用全域選擇符 * 代替，也就是將其處理成了 *>body，而且不光對於 > 選擇符，+,~ 選擇符中這個現象也存在。對於 html* ，由於 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這裡有一個空格。對於第三種 *+html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校正器的驗證，因此也是作者推薦的 hack 用法。6.IE6 不能識別html/* */ >body  #box { color: red; }IE6 字型不會變成紅色7.屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px  !important;}/*FF,OP可見，特別提醒：由於Opera最近的升級，目前此句只為FF所識別*/select:empty {font:12px  !important;}/*safari可見*/這裡select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。8.僅IE7與IE5.0可以識別*+html  select {…}當面臨需要只針對IE7與IE5.0做樣式的時候就可以採用這個HACK。9.僅IE7可以識別*+html  select {…!important;}當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。10.IE6及IE6以下識別* html  select {…}這個地方要特別注意很多部落格都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。html/**/ >body  select {…}這句與上一句的作用相同。11.僅IE6不識別，屏蔽IE6select { display /*屏蔽IE6*/:none;}這裡主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。12.僅IE6與IE5不識別，屏蔽IE6與IE5select/**/ { display /*IE6,IE5不識別*/:none;}這裡與上面一句不同的是在選擇符與花括弧之間多了一個CSS注釋。不屏蔽IE5.513.僅IE5不識別，屏蔽IE5select/*IE5不識別*/ {…}這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別，IE5.5可以識別。14.盒模型解決方案select {width:IE5.x寬度; voice-family :"/"}/""; voice-family:inherit; width:正確寬度;}盒模型的清除方法不是通過!important來處理的。這點要明確。15.盒模型解決方案select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}在Firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題。16.只有Opera識別@media all and (min-width: 0px){ select {……} }針對Opera瀏覽器做單獨的設定。17.IE5.x的過濾器，只有IE5.x可見@media tty {i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}}/* */18.IE5/MAC的過濾器，一般用不著@media all and (min-width: 0px){ select {……} }針對Opera瀏覽器做單獨的設定