作者zero159 (叫我国王)
看板Web_Design
标题[心得] CSS Hack(Filter) 解决各浏览器排版问题
时间Thu Aug 23 17:29:14 2007
最近一直受到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)
1F：推 roga:真完整.. @_@ 08/23 20:43
2F：推 edl2000:看完之後很想把 IE 从世界上移除掉 08/24 15:44
3F：推 zero159:没办法谁叫IE是目前的大众~Firefox还在10多%慢慢爬的小众 08/24 15:49
4F：→ zero159:或许网页设计者应该主动的提供连,提示使用者更新浏览器 08/24 15:50
5F：→ zero159:的版本或是推荐更好的浏览器 08/24 15:53
6F：推 Arton0306:这个好用！ 10/15 22:00