css reset revisit

    正如 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 的自带样式，尊重浏览器的默认样式.

 

mark reset 前

 

mark reset 后

 

figure reset 前

 

figure reset 后

 

而其中 audio 元素在不同浏览器渲染也有差异，当 audio 不带 controls 属性时，除了 ios safari 其他浏览器 width/height 都是 0，那么这时需要显示设置下

 

audio:not([controls]) {
    height: 0;
    width:0;
}

 

可以使用 ios safari 访问以下链接：

 

audio reset 前

 

audio reset 后

 

 

基本字体与大小

 

默认字体大小一般是 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% 继承父元素大小.

 

form 控件 reset 前

 

form 控件 reset 后

 

 

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 聚焦是比较突兀的黄线框，需要统一设置为和其他浏览器一样的细虚线框

 

link reset 前

 

link reset 后

 

 

例如：

 

a {
    color: @linkColor;
    text-decoration: none;

    &:focus {
        outline: thin dotted;
    }

    &:active,
    &:hover {
        outline: 0;
    }

    &:hover {
        color: @linkColorHover;
    }
}

 

 

其他元素字体与排版

 

h1,h2 等在标准浏览器字体相对父元素有变化，而在 ie67 中则是固定的大小，并且 margin 边距也不一样，则需要在 reset 中手动指明下

 

h1,h2 reset 前

 

h1,h2 reset 后

 

例如:

 

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

 

 

abbr 当有 title 属性时，在 ie789 以及 chrome 底部没有虚线

 

abbr reset 前

 

abbr reset 后

 

需要手动加上虚线（ie6 不支持）

 

abbr[title] {
    border-bottom: 1px dotted;
}

 

b strong 在 firefox 以及 ie89 下默认为 bolder 样式

 

strong reset 前

 

strong reset 后

 

最好设置为 bold

 

 b,strong {
    font-weight: bold;
}

 

blockquote 在 ie67 下上边距为 0， 而其他浏览器都为 1em

 

blockquote reset 前

 

blockquote reset 后

 

blockquote {
    margin: 1em 40px;
}

 

 

dfn 在 safari5 下不为斜体

 

dfn before reset

 

dfn after reset

 

 

dfn {
    font-style: italic;
}

 

 

p,pre 在 ie67 下外边距为 0，其他浏览器则为 1em

 

 

p before reset

 

p after reset

 

p,
pre {
    margin: 1em 0;
}

 

 

code/pre/samp 和 form 控件类似，不继承父元素字体和大小，需要给与合适的字体

 

 

code before reset

 

code after reset

 

code,
kbd,
pre,
samp {
    font-family: monospace, serif; /* 1 */
    font-size: 1em; /* 2 */
}

 

 

pre 默认不会自动换行，加上自动换行比较好，而 ie 需要不同的属性

 

pre before reset

 

pre after reset

 

 

pre {
    white-space: pre;
    white-space: pre-wrap;
/*ie*/
    word-wrap: break-word;
}

 

 

q 元素 ie67 下两边不支持双引号，为了一致性，需要在其他浏览器中取出双引号

 

q before reset

 

q after reset

 

q {
    quotes: none;
}

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

 

 

small 同 h1， 在 ie67 下相对大小错误

 

small before reset

 

small after reset

 

 

small {
    font-size: 75%;
}

 

 

sup/sub 默认情况下除了 firefox 都会影响当前行的行高，可使用其他的方法避免

 

 

sub before reset

 

sub after reset

 

 

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 下外边距和内边距错乱

 

 

ul before reset

 

ul after reset

 

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 before reset

 

img after reset

 

img {
    border: 0; 
}

 

 

ie9 中内嵌的 svg 不是默认 overflow hidden，导致包含的元素会超过 svg 元素区域

 

svg before reset

 

svg after reset

 

svg:not(:root) {
    overflow: hidden;
}

 表单元素

 

form 外边在 ie789 获取为 auto，实际应为 0

 

 

form before reset

 

form after reset

 

form {
    margin: 0;
}

 

 

fieldset 各个浏览器存在差异

 

fieldset before reset

 

fieldset after reset

 

可统一为 chrome 内置样式

 

fieldset {
    border: 2px groove #f0f0f0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

 

legend ie 存在差异

 

legend before reset

 

legeng after reset

 

可手动处理

 

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 默认带有内边距

 

form control before reset

 

form control after reset

 

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

 

 

radio before reset

 

radio after reset

 

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 的表现。

 

search before reset

 

search after reset

 

 

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 before reset

 

table after reset

 

 

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

 

 

最终效果

 

 

在 normalize.css 对应 demo 的最终效果

 

New cssreset demo