[心得] CSS Hack(Filter) 解決各瀏覽器排版問題
最近一直受到IE與Firefox上CSS排版的苦惱,所以就自己做了一些資料的整理,
也給大家參考看看,如果有錯誤的地方麻方各位幫我糾正囉!!
網誌連結:http://140.134.26.196/zero159/?p=57
1. 子選擇器法：
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 {}
example: *:first-child+html #target{}
IE7與Firefox等主流瀏覽器都支援，主要針對IE6與以下的版本是不支援的
(但是Mac OS X和Macintosh版的IE還是支援)。
(reference:www.webdevout.net)
2. !important：
example:
#target{
background: green !important;
background: red;
}
當有兩的一樣的屬性同時出現時，IE6與以下的版本會忽略!important的宣告，
但!important要放在前面(IE7已修正此問題，其他OS上則未知)。
(reference:www.webdevout.net)
3. 匯入法：
@import “non-ie.css” all;
(IE不支援在@import指定媒體類型，專門給非IE的瀏覽器用。)
@import ’styles.css’
@import “styles.css”
@import url(styles.css)
@import url(’styles.css’)
@import url(”styles.css”)
@import “null?\”\{”;
@import “styles.css”;
(以上過濾掉老爺瀏覽器IE4，Ns4等，請參考centricle.com)
/*\*//*/
@import “styles.css”;
/**/
(只給Mac OS X IE5和Macintosh IE5用)
匯入的方式則是透過一開始就指定特定的樣式表給特定的瀏覽器來使用，
所以可以寫一份共用的，再針對有問題的部份一一的指定給特定的瀏覽器來修正。
(reference:centricle.com，www.webdevout.net)
4. 前置特殊符號：
*property:value (只給IE7及以下的版本)
_property:value (只給IE6及以下的版本)
example:
#target{
margin-left:30px;//給所有瀏覽器看的
*margin-left:20px;//給IE全系列看(IE7專用)
_margin-left:10px;//給IE6及以下版本看的(IE7不會識別此設定)
}
這個方法我覺得很好用，也很直覺，只要把要改的點抓出來
分別針對IE7及IE6作設定就好了(因為通常有問題的就是IE)。
但是美中不足的是這樣的CSS是沒辦法通過驗證的，要特別留意。
(reference:centricle.com，www.webdevout.net)
5. voice-family：
voice-family:”\”}\”";
voice-family:inherit;
property:value;
example:
#target{
margin:0 10px;//設定左右10px的邊距
width:120px;//給IE5看的寬度
voice-family:”\”}\”";//IE5會略過以下
voice-family:inherit;
width:100px;//修正給其他瀏覽器看的正確寬度
}
這個方法主要是針對IE5對於Box的長寬解釋而來的，因為CSS規格中，
box的長寬與padding、border是分開計算的，
而IE5則是把padding、border都算在Box的長寬內，
所以實際的box會變的比較小。所以透過這個方法來從新設定新的長寬
給IE5的版本。
(reference:centricle.com)
6. star html ：
* html (IE6及以下版本)
*+html (IE7及IE5.0可識別)
透過這個方法再結合!important及voice-family就可以針對
IE7、IE6及IE5.5以下版本做修正，而不適用其他的瀏覽器。
example:
#target{
color:red;//給所有瀏覽器用
}
* html #target{
color:yellow;//給IE5.5以下用
voice-family:”\”}\”";
voice-family:inherit;
color:black;//給IE6用
}
*+html #target{
color:green !important;//給IE7用
}
(reference:centricle.com)
...END
--
http://140.134.26.196/zero159
http://www.wretch.cc/album/zero159
http://www.flickr.com/photos/zero159/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.162.49.111
※ 編輯: zero159 來自: 218.162.49.111 (08/23 17:32)
※ 編輯: zero159 來自: 218.162.49.111 (08/23 17:38)
推
08/23 20:43, , 1F
08/23 20:43, 1F
推
08/24 15:44, , 2F
08/24 15:44, 2F
推
08/24 15:49, , 3F
08/24 15:49, 3F
→
08/24 15:50, , 4F
08/24 15:50, 4F
→
08/24 15:53, , 5F
08/24 15:53, 5F
推
10/15 22:00, , 6F
10/15 22:00, 6F