applezqp

这是一篇很纠结的文章，酝酿好久啊，我的执行力。

对于css reset，开始真的没有什么研究，从*{margin:0; padding:0;}到网上的eric css，都是完全的“拿来主义”。看了Reset CSS 研究（八卦篇）很受启发，于是开始了自我折磨的路程。

1.HTML元素的认识

css reset的目的&意义

第一步是清除浏览器的默认样式，第二步是重设浏览器的默认样式。

那么应该先了解HTML元素在各个浏览器下的表现吧。于是写了一个Html4，其中主要是使用html4的基本元素。之前转过[转]HTML4默认样式，这是w3c组织给出html4的样式建议，各个浏览器对这个样式的解释还是存在差异。通过Html4，就可以比较清楚的发现其中的差异。

例如，IE6下abbr没有提示；FF, IE下a中的图片有边框，Op, Sa, Ch则没有；FF, IE, Ch下form元素的表现是基于用户的Window主题，而Op,Sa则依然按照自己的渲染法则。奇怪的是，Ch也是用Sa的浏览器引擎，居然同Sa表现不同（BTW,Ch只有JS引擎是新的。）。不解！

2.各个css reset

主要分析参考了eric-reset, yui-reset, kissy-reset。

(1. table的重置

各个reset对于table的重置比较一致：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

经过测试发现，border-spacing对于IE6,IE7来说是没有效果的，而且通过border-collapse: collapse; 就可以达到效果，为什么要写后一句呢？在eric-reset中eric强调了tables still need ‘cellspacing=”0″‘ in the markup ，也不解为什么。

(2.  q的重置

eric-reset版本:

blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

但是在测试页面中blockquote在各个浏览器中都没有出现引号，没有必要进行重置，对于q为什么要设置两次content属性呢, content:none只对FF和IE8有效，对Op, Sa, Ch没有效果，而且content:”"已经可以完全应付了。所以采用了yui-reset和kissy-reset的版本：

q:before, q:after{content:'';}

对q进行重设是很有必要的，IE6, IE7没有引号，而且当q嵌套q时，各个浏览器格式千奇百怪。

我觉得FF, IE8表现的最合理。在引号中的引号用单引号表示。

(3. 文本格式元素的重置

strong我觉得还是默认加粗比较好，虽然它所强调的是语义，但也应该在视觉上给人同样的效果。而em去除斜体表现，则是因为斜体在中文字体中视觉效果并不明显。

address,cite,dfn,optgroup,em,var{font-style:normal;}

abbr, acronym(HTML 5不支持acronym)差异性比较大。

不过各个reset对它们的重置还比较统一，

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

除了kissy-reset版本，

abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help;}

kissy的版本在非IE6下的用户体验比较好。用哪种呢？纠结、痛苦……最终还是照顾IE6的心情，它也不容易啊。

这里想展示一下select的表现：

为什么不修正optgroup的斜体呢？因为optgroup的样式在IE下无法重置，即不能改变font-style和font-weight。其中Op中optgroup的背景色是可以重置的，但不能使用background:none除去背景颜色。

对于legend的重置，legend在IE下的字体颜色也很怪异，如果计算机使用的是经典主题，其颜色是黑色；如果XP主题，其颜色是蓝色(#0046D5)。所以统一重置成黑色。

(4. 字体的重置

一些表单元素，yui-reset的版本：

input,button,textarea,select,optgroup,option {
 font-family: inherit;
 font-size: inherit;
 font-style: inherit;
 font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,button,textarea,select {
 *font-size: 100%;
}

由于textarea，input和select, button默认无继承性，所以要通过属性指定继承性(inherit)，但IE7以下不识别inherit属性值。yui的写法觉得还是比较繁琐，参考了kissy-reset版本

body,
button, input, select, textarea {font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}

“\5b8b\4f53″是“宋体”的unicode 表示，不用“宋体”的正式名“SimSun”, 是据说FF的某些版本和Op不支持SimSun的写法（PS:没有测试）。

设置code, kbd, pre, samp, tt

yui-reset:

pre,code,kbd,samp,tt {
 font-family:monospace;
 *font-size:108%;
 line-height:100%;
}

在IE7下，这些标签里的字体好像是会小一点，不过觉得真的不是很明显（应该不是我心理作用吧），暂时将这点忽略，不想再reset中使用hack。

这是30号字体的效果图，右边的CSS Reset是在code标签中的。code, kbd, pre, samp, tt标签的默认样式是font-family:monospace，

但FF, Op, Ch的好像没有效果啊……傻眼了。所以对这些标签进行了重置。

code, kbd, pre, samp, tt{font-family:"Courier New", Courier, monospace;}

(5. 其他，hr

kissy-reset版本

hr{border:none; height:1px; *color:#fff;}

hr元素很少用，所以很少有reset对它进行重置，貌似淘宝的页面使用了。hr{border:none;}对IE也是没有作用的，其他的属性也不是太了解，所以还是不写这条规则了。

我的css reset，使用了reset的Html4-reset的页面。

/*
Date:09.09.11
Author:ZQP
Email:zhouqiuping@gmail.com
Website:applezqp.com
*/
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;}
table{border-collapse:collapse; border-spacing:0;}
ul,ol{list-style:none;}
fieldset,img {border:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
q:before, q:after{content:'';}
abbr, acronym{border:0; font-variant:normal;}
address,cite,dfn,optgroup,em,var{font-style:normal;}
legend{color:#000;}
/*typography*/
body, button, input, select, textarea {font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4, h5, h6 { font-size:100%; }
code, kbd, pre, samp, tt{font-family:"Courier New", Courier, monospace;}

主要参考

1. Reset CSS 研究（八卦篇）
2. Reset CSS 研究（技术篇）
3. 打造自己的reset.css

浏览器只有增加，没有减少，无奈！虽然所有人都希望IE6能成为历史，但我们应该还要面对它好几年吧。在我现在的工作中，只需要测试IE6~8, FF，因此我对OP, Sa, CH测试的很少，有时间的话，确实应该测试的全面一些。对CSS Hack的总结的不是很全面，实在很繁琐，列出常用的吧。

selector{
color:red;
[;color:red;]/*Sa, CH*/
color:red\0;/*IE8*/
*color:red;/*IE7-*/
_color:red;/*IE6*/
}

html* selector{
backgrond-color:red;/*Sa IE7 OP*/
}

*+html selector{
backgrond-color:red;/*OP9.6-*/
*backgrond-color:red;/*IE7*/
}

*html selector{
backgrond-color:red;/*IE6*/
}

html*~/**/body selector{
backgrond-color:red;/*IE8*/
}

@media all and(min-width:0){
selector{color:red;}
}/*only Opera */

@media all and (min-width:0){
selector{
color:red; /*Opera,Sa3.2.3- */
html* selector{color:red; /*Sa3.2.3-*/}
}
}

IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
<!--[if lt IE 6]> Only IE 6- <![endif]-->
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

相关阅读：

1. CSS Hack 汇总快查
2. [原][更新]最新CSS兼容方案
3. Goodbye to CSS Hack
4. Ajaxian » CSS Browser Hacks

对于用CSS实现垂直居中有很多种方法，对于标准浏览器的实现方法较为简单、统一，即采用单元格垂直居中的特性：

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

这些方法的不同之处在于对IE的实现。主流的方法有两种：

方法一：

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;} 

优点：无需定义父元素的高度。

缺点：引入较多额外的标签。

方法二：

元素高度/字体大小的比值为1.14左右时IE可实现垂直居中

.box {
   display: table-cell;
   vertical-align:middle;
   width:200px;
   height:200px;
   text-align:center;
   /* hack for ie */
   *display: block;
   *font-size: 175px;
   /* end */
   border: 1px solid #eee;
}
.box img {
   vertical-align:middle;
}

优点：没有额外的标签。

缺点：计算font-size的值需要知道父元素的高度。

其实都是根据不同的需求来确定解决方案。相关阅读5还有很多奇怪的方法，有一些是是方法一的变种，没读懂……

补充：

方法二中，当.box为浮动时在FF下将失效，原因不知。

相关阅读：

1. CSS解决未知高度垂直居中
2. 2007淘宝UED招聘题解(前端开发部分)
3. CSS实现完美垂直居中
4. CSS实现垂直居中的5种方法
5. CSS图片垂直居中方法整理集合 ！

延伸——水平居中：

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.一文中所用到的水平居中的方法和垂直居中方法一的原理类似。在我看来都很有创意，想法很重要。

body{
	background-color:#FFF;
	font:12pt/180% "Times New Roman", Times, serif;
	color:#000;
	margin:0;
	padding:0;
}
a:link, a:visited {
	color: blue;
	text-decoration: underline;
}
#main a:link:after, #main a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
}
#logo, #submenu, img, #main h2 a{
	display:none;
}
#main caption a{
	display:block;
}
#container{
	width:auto;
	margin:5% 5% 5% 10%;
	float: none !important;
}
#main{
	padding-top: 1em;
	border-top: 1px solid #000;
}
h2{
	font-size:120%;
}
h3{
	font-size:110%;
}

相关阅读：

• http://www.alistapart.com/articles/goingtoprint/

• http://meyerweb.com/eric/articles/webrev/200001.html

最早看到切换样式表的应用，是Yahoo的首页。虽然布局没有改变，但整个页面的颜色都变了。当时觉得好神奇啊，但后来这种应用太泛滥了，都有点反感。而对于它的实现，其实我并不知道。今天看了Alternative Style: Working With Alternate Style Sheets，来自Listapart，以下代码摘自他的文章。哇，这篇文章写自2001，好早啊，感叹一下！