阅读量:0
CSS Hack是一种用于解决浏览器兼容性问题的技术，通过在CSS样式中使用特定的选择器或属性值来针对特定浏览器进行样式调整。
以下是对CSS Hack整理的详细内容：
媒体查询Hack
| Hack | 支持的浏览器 | 示例代码 |
| @media screen\9 | 只支持IE6、7 | @media screen\9 {...} |
| @media \0screen | 只支持IE8 | @media \0screen {...} |
| @media \0screen\,screen\9 | 只支持IE6、7、8 | @media \0screen\,screen\9 {...} |
| @media screen\0 | 只支持IE8、9、10 | @media screen\0 {...} |
| @media screen and (minwidth:0\0) | 只支持IE9、10 | @media screen and (minwidth:0\0) {...} |
| @media screen and (mshighcontrast: active), (mshighcontrast: none) | 只支持IE10 | @media screen and (mshighcontrast: active), (mshighcontrast: none) {...} |
| @media all and (minwidth:0) | 支持IE9、Chrome、Safari、Firefox、Opera | @media all and (minwidth:0){...} |
| @media screen and (webkitmindevicepixelratio: 0) | 只支持wekit内核浏览器Chrome、Safari | @media screen and (webkitmindevicepixelratio: 0) {...} |
| @media all and (webkitmindevicepixelratio: 10000), not all and (webkitmindevicepixelratio: 0) | 只支持Opera | @media all and (webkitmindevicepixelratio: 10000), not all and (webkitmindevicepixelratio: 0) {...} |
| @mozdocument urlprefix() | 只支持Firefox | @mozdocument urlprefix() {...} |
选择器Hack
| Hack | 支持的浏览器 | 示例代码 |
| html* 选择器 | 只支持IE7 | html* .class{color:#F00;} |
| *+html 选择器 | 仅支持IE7（需要HTML顶部有声明：） | *+html .class{color:#0F0;} |
| *html 选择器 | 只支持IE6 | *html .class{color:#00F;} |
属性Hack
| Hack | 支持的浏览器 | 示例代码 |
| 选择器{属性：属性值\9;} | 只支持IE6、7、8、9、10 | .class{color:#F00\9;} |
| 选择器{属性：属性值\0;} | 只支持IE8、9、10 | .class{color:#0F0\0;} |
| 选择器{属性：属性值\9\0;} | 支持IE8的部分属性值、完全支持IE9、10 | .class{color:#00F\9\0;} |
| 选择器{*属性：属性值;} | 仅支持IE7和IE6 | .class{*color:#F0F;} |
| 选择器{_属性：属性值;} | 只支持IE6 | .class{_color:#00F;} |
| 选择器{属性：属性值!important;} | 不不支持IE6 | .class{color:#F0F!important;} |
| 选择器{[;属性:属性值;]} | 仅支持Safari和Chrome，且只能放在选择器的最后一个属性 | .class{[;color:#F0F;]} |
FAQs
Q1: 什么是CSS Hack？
A1: CSS Hack是一种通过在CSS样式中加入一些特殊的符号或条件语句，让不同的浏览器识别不同的符号或执行特定的条件语句，以达到应用不同的CSS样式的目的，它主要用于解决由于不同浏览器或同一浏览器的不同版本对CSS的支持和解析不一致导致的页面显示效果差异问题。
Q2: CSS Hack有哪些常见的形式？
A2: CSS Hack大致可以分为三种表现形式：
属性前缀法：在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，如*color、+color、\9 color等。
选择器前缀法：在选择器上运用继承法，如*html .class、*+html .class等。
IE条件注释法：利用HTML头部的条件注释来载入不同的CSS、JS、HTML和服务器代码等，如<![if IE]>您的代码<![endif]>。
CSS Hack 整理
CSS Hack 是一种技巧，用于针对不同的浏览器应用特定的样式，以下是一些常见的 CSS Hack 方法及其详细说明：
1. 属性选择器 Hack
1.1 条件注释（针对IE版本）
/* IE6 */ html .class { /* 样式 */ } /* IE7 */ *+html .class { /* 样式 */ } /* IE8 */ html.ltie8 .class { /* 样式 */ }1.2 属性选择器（针对所有浏览器）
.class[style*="color: red"] { /* 样式 */ }2. 类选择器 Hack
2.1 属性选择器（针对IE6）
.class:root { /* 样式 */ }2.2 属性选择器（针对IE7）
.class:root { /* 样式 */ }3. ID 选择器 Hack
3.1 属性选择器（针对IE6）
#id:root { /* 样式 */ }3.2 属性选择器（针对IE7）
#id:root { /* 样式 */ }4. 嵌套选择器 Hack
4.1 属性选择器（针对IE6）
body * html .class { /* 样式 */ }4.2 属性选择器（针对IE7）
body * html .class { /* 样式 */ }5. 媒体查询 Hack
5.1 条件注释（针对IE版本）
@media all and (IE 6) { .class { /* 样式 */ } } @media all and (IE 7) { .class { /* 样式 */ } }5.2 属性选择器（针对所有浏览器）
@media all and (mshighcontrast: none), (mshighcontrast: active) { .class { /* 样式 */ } }6. 基于特征的 Hack
6.1 属性选择器（针对IE6）
.class:root { /* 样式 */ }6.2 属性选择器（针对IE7）
.class:root { /* 样式 */ }注意事项
CSS Hack 应谨慎使用，过度依赖可能会导致代码难以维护。
优先考虑使用标准的 CSS 属性和选择器，避免使用 Hack。
随着浏览器版本的更新，某些 Hack 可能会失效，需要及时更新。
是 CSS Hack 的整理，希望能对您有所帮助。
