CSS技巧：浏览器兼容与特殊样式修复

该资源主要介绍了CSS中针对不同浏览器的特定修复技巧（hacks）以及一个常见的CSS重置样式表（CssReset by Eric Meyer），旨在确保网页在多种浏览器上的一致性显示。 在CSS开发中，由于各浏览器对CSS规则的解析存在差异，有时需要编写特定的hack来解决兼容性问题。以下是一些常见的浏览器针对性hack： 1. Internet Explorer 6（IE6）： - `* html .yourclass {}`：这个选择器只对IE6有效，因为它错误地解析了星号(`*`)前导的选择器。 2. Internet Explorer 7（IE7）： - `*+html .yourclass{}`：这是针对IE7的一个hack，利用了IE7处理伪元素的方式。 3. IE7及现代浏览器： - `html>body .yourclass {}`：此选择器适用于IE7以及不识别此语法的现代浏览器。 4. 现代浏览器（非IE7）： - `html>/**/body .yourclass {}`：这个是另一种写法，同样适用于非IE7的现代浏览器。 5. Opera 9.27及更早版本： - `html:first-child .yourclass {}`：此选择器用于针对Opera的老版本。 6. Safari： - `html[xmlns*=""] body:last-child .yourclass {}`：这个选择器应用于Safari浏览器。 - `body:nth-of-type(1) .yourclass {}` 和 `body:first-of-type .yourclass {}`：这两个选择器也适用于Safari 3+，Chrome 1+，Opera 9+以及Firefox 3.5+。 7. Safari 3+，Chrome 1+： - `@media screen and (-webkit-min-device-pixel-ratio:0) {...}`：这是一个媒体查询，针对具有WebKit渲染引擎的浏览器，如Safari 3+和Chrome 1+。 此外，资源中还提供了一个经典的CSS重置样式表（Eric Meyer's Reset CSS）。这个重置样式表的作用是消除默认的浏览器样式，确保各个元素在所有浏览器中都有相同的初始样式： - 通过设置`margin`, `padding`, `border`, `outline`, `font-size`, `vertical-align`, `background`等属性为零，消除了元素的默认间距、边框和背景。 - 设定了`line-height: 1`以保持一致的行高。 - 通过取消列表的默认样式（`list-style:none`），避免了列表项符号的显示。 - 对于`:focus`，移除了元素获得焦点时的默认轮廓，以实现自定义的焦点样式。 - 对于`ins`和`del`元素，分别取消了下划线和删除线，以便自定义插入和删除文本的样式。 - 最后，为了确保表格的样式统一，重置了表格的`border-collapse`和`border-spacing`属性。 这段CSS代码和hack对于跨浏览器的前端开发非常有帮助，可以确保在各种浏览器环境中页面的布局和样式表现一致。