浏览器特定的CSS Hacks汇总

CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则。实现浏览器兼容主要有两种方式条件样式表和CSS Hacks（Selector Hacks、Attribute Hacks）。对此根据一些资料汇总了一些CSS Hacks方法。 CSS Hacks是前端开发者在处理跨浏览器兼容性问题时采取的一种技术手段，它们利用不同浏览器对CSS解析的差异，针对性地编写CSS代码，以便在特定的浏览器中生效，而在其他浏览器中忽略。以下是对标题和描述中提到的CSS Hacks进行的详细说明： 1. **Selector Hacks**： - `* html #uno`：仅适用于IE6及以下版本，因为IE6不正确处理`*`选择器与ID选择器的组合。 - `*:first-child+html #dos`：这针对IE7，因为它错误地将`body`视为第一个子元素。 - `html>body #tres`：适用于除IE6和IE7之外的所有现代浏览器。 - `html>/**/body #cuatro`：这个技巧是为了解决IE8以及更高版本的问题，同时不影响其他浏览器。 - `html:first-child #cinco`：用于早期的Opera 9.27和Safari 2。 - `html[xmlns*=""] body:last-child #seis`：针对Safari 2到3。 - `body:nth-of-type(1) #siete` 和 `body:first-of-type #ocho`：适用于Safari 3+，Chrome 1+，Opera 9+，FF 3.5+。 - `@media screen and (-webkit-min-device-pixel-ratio:0)`：用于iPhone和移动Webkit浏览器。 - `@media screen and (max-device-width: 480px)`：针对设备宽度为480px或更小的设备，如早期的智能手机。 - `html[xmlns*=""]:root #trece` 和 `*|html[xmlns*=""] #catorce`：适用于Safari 2到3.1，以及Opera 9.25。 - `root *> #quince`：适用于所有非IE6-8的浏览器。 - `*+html #dieciocho`：针对IE7。 - `@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)`：针对IE10及更高版本。 2. **Attribute Hacks**： - `#once { _color: blue; }`：只在IE6中生效，下划线前缀是IE6特有的。 - `#doce { *color: blue; }`：适用于IE6和IE7，星号前缀是IE7也支持的。 - `#diecisiete { color/**/: blue; }`：所有非IE浏览器都忽略此语法错误，而IE6、IE7、IE8会解析。 - `#diecinueve { color: blue\9; }`：用于IE7、IE8，反斜杠后跟数字9是IE8的特殊语法。 - `#veinte { color/*\**/: blue\9; }`：同样适用于IE7、IE8，这里的双星号注释是为了防止在某些情况下影响IE9。 - `#v...`（未完成的示例）：可能是为其他浏览器设计的，但在这个例子中没有提供完整的代码。 使用CSS Hacks需要注意的是，这些技巧依赖于浏览器的具体行为，随着时间推移，浏览器的更新可能会导致这些Hacks失效或不再适用。因此，现代的前端开发趋势是避免使用CSS Hacks，转而依赖条件注释（如`<!--[if IE]-->`）、特性检测库（如Modernizr）或者使用PostCSS等工具来自动转换CSS，以实现更好的浏览器兼容性和维护性。此外，使用最新的CSS规范和框架（如Bootstrap或Materialize CSS）也能大大减少兼容性问题。