正如 javascript 兼容库的作用， css reset 也扮演着类似的角色，css reset 保证了各个浏览器最基本元素渲染的一致性和统一性 ，从而减少在构建复杂界面过程中遇到各个浏览器出现不同展现的问题。以前对于 css 框架关注比较少，而近来随着 bootstrap 以及 lesscss 等的出现，使得构建 css 框架也开始成为一种必要。那么先从 css reset 开始吧。
css reset 从最早的
* {margin:0;padding:0;}
到简单实用的 YUI cssreset ，再到目前流行的 normalize.css . 趋势是越来来细化，越来越尊重浏览器自带的默认样式 ，而不是简单得完全重置掉，例如 ul (padding margin list-type), strong (font-weight), h1~h6(font-size)。这次综合参考 normalize.css , bootstrap , KISSY cssreset ，在构建新的 css reset 时也遇到了不少浏览器差异问题，值得记录。
注：构建过程采用 lesscss
构建过程
html5 元素
目前老版本 ie 通过 html5shim 等也可以使用 html5 标签，但是一个问题就是虽然可以使用，但是新标签没有样式，那么就需要对 html5 的标签重新定义样式，例如：
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
.ks-inline-block_();
}
mark {
background: #ff0;
color: #000;
}
figure {
margin: 1em 40px 1em 40px;
}其中 mark figure 参照 chrome 的自带样式，尊重浏览器的默认样式.
而其中 audio 元素在不同浏览器渲染也有差异，当 audio 不带 controls 属性时，除了 ios safari 其他浏览器 width/height 都是 0，那么这时需要显示设置下
audio:not([controls]) {
height: 0;
width:0;
}可以使用 ios safari 访问以下链接：
基本字体与大小
默认字体大小一般是 16px，过大，一般设置为12px。
默认字体在中文环境下，chrome 为 simsun 而其他浏览器为 new times，推荐统一为 tahoma, arial, simsun, sans-serif;
页面背景色除了 chrome 外用 js 获取都是 transparent，为了一致性，简单设置为 #fff 即可，字体颜色也对应白色统一为 #222.
line-height 默认比较诡异，firefox 大概为 1.3，其他大概为 1.13，统一为 1.5 即可.
body margin 默认情况下 ie8- 为 10px，而其他浏览器为 8px，一般 body 不需要 margin，设置为 0 比较好.
input/button 等表单控件比较特殊，默认情况不继承父元素的 font-family 以及 font-size，需要手动设置表单控件的 font-family 为页面字体，font-size 为 100% 继承父元素大小.
ios safari 中 从 portrait 转到 landscape 会导致字体大小调整，通过设置 text-size-adjust 可防止调整（现实为仍然少量调整，双击恢复正常）
例如：
html {
font-size: @baseFontSize; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
html,
button,
input,
select,
textarea {
font-family: @baseFontFamily;/* 1 */
}
button,
input,
select,
textarea {
font-size: 100%;
}
body {
margin: 0;/* 1 */
color: @textColor;
background-color: @bodyBackground; /* 2 */
line-height: @baseLineHeight; /* 3 */
}
链接
链接色一般来说应该设置一个统一的颜色，为了美观取消下划线，以及 hover active 时的虚线框，但是为了可访问性，需要保留聚焦时的虚线框，需要注意的是 chrome 聚焦是比较突兀的黄线框，需要统一设置为和其他浏览器一样的细虚线框
例如：
a {
color: @linkColor;
text-decoration: none;
&:focus {
outline: thin dotted;
}
&:active,
&:hover {
outline: 0;
}
&:hover {
color: @linkColorHover;
}
}
其他元素字体与排版
h1,h2 等在标准浏览器字体相对父元素有变化，而在 ie67 中则是固定的大小，并且 margin 边距也不一样，则需要在 reset 中手动指明下
例如:
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
abbr 当有 title 属性时，在 ie789 以及 chrome 底部没有虚线
需要手动加上虚线（ie6 不支持）
abbr[title] {
border-bottom: 1px dotted;
}
b strong 在 firefox 以及 ie89 下默认为 bolder 样式
最好设置为 bold
b,strong {
font-weight: bold;
}blockquote 在 ie67 下上边距为 0， 而其他浏览器都为 1em
blockquote {
margin: 1em 40px;
}
dfn 在 safari5 下不为斜体
dfn {
font-style: italic;
}
p,pre 在 ie67 下外边距为 0，其他浏览器则为 1em
p,
pre {
margin: 1em 0;
}
code/pre/samp 和 form 控件类似，不继承父元素字体和大小，需要给与合适的字体
code,
kbd,
pre,
samp {
font-family: monospace, serif; /* 1 */
font-size: 1em; /* 2 */
}
pre 默认不会自动换行，加上自动换行比较好，而 ie 需要不同的属性
pre {
white-space: pre;
white-space: pre-wrap;
/*ie*/
word-wrap: break-word;
}
q 元素 ie67 下两边不支持双引号，为了一致性，需要在其他浏览器中取出双引号
q {
quotes: none;
}
q:before,
q:after {
content: '';
content: none;
}
small 同 h1， 在 ie67 下相对大小错误
small {
font-size: 75%;
}
sup/sub 默认情况下除了 firefox 都会影响当前行的行高，可使用其他的方法避免
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}列表
ul/li/dd 在 ie6,7 下外边距和内边距错乱
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu,
ol,
ul {
padding: 0 0 0 40px;
}
img/svg
ie 当 img 在链接内时会导致出现边框
img {
border: 0;
}
ie9 中内嵌的 svg 不是默认 overflow hidden，导致包含的元素会超过 svg 元素区域
svg:not(:root) {
overflow: hidden;
}表单元素
form 外边在 ie789 获取为 auto，实际应为 0
form {
margin: 0;
}
fieldset 各个浏览器存在差异
可统一为 chrome 内置样式
fieldset {
border: 2px groove #f0f0f0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend ie 存在差异
可手动处理
legend {
border: 0; /* 1 */
margin:0;
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
form 控件一系列问题： textarea 在 ie 下默认存在滚动条，button/input 各个浏览器 margin 不一致， ie button 左右无内边距, firefox button 默认带有内边距
button,
input,
select,
textarea {
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* 1. Removes default vertical scrollbar in IE6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/*
* IE6+ need padding-left/right
*/
button {
padding: 0px 6px;
/* ie6 fix*/
_padding: 0;
}
/*
* Removes inner padding and border in FF3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
checkbox radio 在 ie8,9 下 box-sizing 默认为 content-box 并且 ie 有多余的padding
ie6 无法修复
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px;
}
search input 仅 chrome 支持，关键是 chrome 下 box-sizing 为 border-box，其他浏览器都和 text 保持一致为 content-box，目前为了一致性只能禁止 chrome 的表现。
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in S5, Chrome.
*/
input[type="search"] {
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
}
}
表格
统一为更常用的合并边框模型
table {
border-collapse: collapse;
border-spacing: 0;
}
最终效果
在 normalize.css 对应 demo 的最终效果
扫一扫
5412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
