css hack惯用手法

什么是css hack？它是如何实现浏览器兼容处理的？

通俗的说，所谓css hack 指的是：为了解决不同浏览器对css解析的不同而采取的措施。
换句话说，也就是指：对不同浏览器机器不同版本对css解析后出现页面内容的兼容性差异处理。

---

这其中，大多数针对的是下面的几个常用浏览器的兼容问题：

1. 解决IE6中浮动元素的margin双边距问题；
2. 识别不同浏览器、ie浏览器不同版本的方法
3. 透明图片与透明背景的设置方法
4. css3滤镜、蒙版、模糊效果的实现

因为现在浏览器类型、同一浏览器版本众多，浏览器对应的默认样式也不尽相同。不同的浏览器，不同版本的浏览器，导致css的选择器默认的一些数值也不可能相同。因此，本文章着重总结一下css hack的常用重置手法，并辅以代码示下，抛砖引玉，望对于初级开发者有所助益。

说明：

本文只是本人阅历不同书籍和个人开发，今天经验性总结一下CSS Hack惯用伎俩，可作为所有项目的使用的共性存在，抛砖引玉，点到为止，不做更多展示，而不同的项目也可有其个性，开发者可根据项目特性化需求自己定制。还有一些共性，不属于样式重置部分，但是同等重要！由此，可引申为CSS框架，只不过框架考虑的更多。

然而，为了让浏览器显示的都一致，可以通过重新定义标签样式的方法，以此覆盖浏览器的css默认属性。

而为了便于重复使用，经常需要把这部分勇于覆盖路蓝旗默认样式的css代码抽离出来，如此，便形成了css reset文件，可称为“重置文件”，命名：“reset.css”

目前比较流行的重置样式有： Eric Meryer和Yui ，另外Condensed Meyer Reset简化Eric Meryer 的样式。

1. Eric Meryer的reset.css样式表，代码如下：

/*浏览器重置*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

参考上述代码，在YUI的reset中，重置了背景色为白色，而文字颜色为黑色。
一般不建议这么重置背景色！
以防止破坏用户的浏览器自定义的网页默认的背景色。

针对不同浏览器对具有内、外边距元素的设置不同，有一种极为简单通俗的办法，通过定义：

*{margin: 0; padding: 0;}

让所有元素的padding和margin都清空归零。

而在YUI 的reset中，却只把有内、外边距的元素样式清空归零，而且其他元素不动，这样避免给一些无关元素带上不必要的样式，导致元素过多时的性能下降。

代码如下：

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,
textarea,p,blockquote,th,td {
    margin: 0;
    padding: 0;
}

同理，

2. 对于具有边框的元素的重置，处理代码如下：

fieldset,img {
    border: 0;
}
abbr,acronym {
    border: 0;
    font-variant: normal;
}

3. 对于列表样式的重置，Eric和YUI的hack方式分别是：

ol,ul{                      |         li{
    list-style: none;       |            list-style:none;
}                           |         }

前者比后者多了3个字节。但还是建议使用前者！
建议使用前者比较稳妥。波及元素更少，性能会更高一点！

4. 对于上标、下标、baseline 的重置

sup,sub{
    font-size: 100%;
    vertical-align: baseline;
}

5. 对于表格的样式重置

需要在html中设置cellspacing=0达到table重置效果，且设置caption、th不要居中。

table{
    border-collapse: collapse;
    border-spacing: 0;
}
caption,th{
    text-align: left;
}

6. 对于a链接

YUI中没有采取样式重置，这里建议把链接的下划线重置归纳进来，对整体项目有统一的链接样式。对于个别的链接元素，可以在后续的个性开发中设计。

a{
    text-decoration: none;
}
:link, :visited{
    text-decoration: none;
}

另外，在某些浏览器中， q 或 blockquote 前后会出现引号，严重影响页面美感和用户体验，可以重置为：

blockquote{
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after{
    content: "";
    content: none;
}

7. 除了重置样式之外，清除浮动也很重要！

目前主要推荐放入.cleatfix，虽然不属于重置，可放在布局中：

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    display: block;
}
/* Hides from IE-Mac */
*html .clearfix{
    height: 1%;
}
.clearfix{
    display: block;
}
/* End hide from IE-Mac */

---

8. 附件：常见浏览器、厂商标识

序号	浏览器名称	匹配内核或私有属性
1	Chrome	-webkit-
2	safari	-webkit-
3	Opera	-o-
4	IE	-ms-
5	Firefox	-moz-

---

9. 页底，目录导航：

---

如有问题，欢迎留言建议和更正。

以上就是关于“ css hack的常用重置手法 ”的全部内容。