下面来介绍一下关于css hack来解决一些多浏览器中不兼容的问题介绍。
| IE6 | IE7 | Firefox2+ | Firefox3+ | Opera9.5+ | Safari3.1+ | |
|---|---|---|---|---|---|---|
| 选择符{ *属性:值; }[1] |
√ | √ | × | × | × | × |
| 选择符{ _属性:值; } |
√ | ×[2] | × | × | × | × |
| 选择符,x:-moz-any-link{ 属性:值; } |
× | √ | √ | √ | × | × |
| 选择符,x:-moz-any-link,x:default{ 属性:值; } |
× | √ | × | √ | × | × |
| @media all and (min-width:0){ 选择符{属性:值;} }[3] |
× | × | × | × | √ | √ |
| @media all and (-webkit-min-device-pixel-ratio:0){ 选择符{属性:值;} }[4] |
1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分，所以不能通过验证。
[2] 当IE7为quriks mode时和IE6为quriks mode解析相同，所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了，下划线_作为属性名的前缀是符合CSS2.1规范语法的，但不存在于其属性名列表中，所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks，条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化，但现在考虑其CSS Hacks问题有点过早，真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
[3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}}，那么Safari3+将无法识别，Opera9.5+则可以。
[4] 这个表达式Opera9.0是支持的。
上面这些CSS Hacks仅仅是沧海一粟，是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks
在这里我就不介绍了。
国外网站参考
The syntax for conditional comments is as follows:
Positive
| 代码如下 | 复制代码 |
| <!--[if condition]> HTML <![endif]--> Negative <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]--> |
|
condition is one of the following:
IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version
version is the version of Internet Explorer, typically 5, 5.5, 6, or 7
HTML is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.
For negative conditions,
| 代码如下 | 复制代码 |
| <![IGNORE[--><![IGNORE[]]> can be replaced with --> | |
if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.
The <![IGNORE[ ... ]]> directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: <!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]--> where XHTML is the same both places. Note that Internet Explorer 7 and below don't yet recognize XHTML as a form of XML, so this is merely forward-looking.
Conditional comments as a CSS hack
Up
Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> </head> <body> <p>Test</p> </body> </html> |
|
参考地址:http://www.webdevout.net/css-hacks