[CSS Filter and Hacks] 解決IE vs Firefox等浏览器排版显示不同题
万恶IE成为大家的箭靶也不是第一天了，除了安全漏洞外，最让网页开发者头痛的就是CSS支持的问题，每次在IE上排版完后，在Firefox上看就完全不一样，在Firefox上排好则IE又乱掉了。关于IE或是其它浏览器在显示上面的问题打算整理完写在下一篇。今天先来讨论怎么透过CSS Filter(CSS Hacks… whatever)来替特定的浏览器指定专属的属性，或是采用自己专属的样式表。(这篇主要都是解决排版问题或是说指定给不同浏览器不同的排版格式)
CSS Filter的目的就是要用特定的CSS语法来过滤掉某些特定的浏览器，首先对于各种不同的CSS Filter一定要来参考centricle.com上所整理出来的资料，针对各种浏览器与CSS Filter之间的支持，虽然有列出很多的方法来实现各种应对上的问题，但有一些是透过错误的语法来过滤，所以会照成CSS验证的错误，不过也不是每个网站都把完全符合W3C规范当成必要的需求，毕竟能够即刻且实用的解决问题还是很迷人的，所以我就撷取一些自己觉得方便好记的方式。
- 子选择器法：
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)
- !important：
example:
#target{
background: green !important;
background: red;
}
当有两的一样的属性同时出现时，IE6与以下的版本会忽略!important的宣告，但!important要放在前面(IE7已修正此问题，其它OS上则未知)。
(reference:www.webdevout.net)
- 汇入法：
@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)
- 前置特殊符号：
*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)
- 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)
- 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)
写到这边总算告一段落了，与IE之间的CSS大战没这么容易就算了，还有一大堆bug等着修正，以后有发现不错的方法再继续补上去吧。
