【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

众所周知,浏览器会为我们创建基本的样式。比如<h2>,我们不需要为它写任何css样式,在浏览器上展示出来,一眼就只知道它是大标题。问题是,不同浏览器之间的默认效果不尽相同,于是乎,在Chrome下很漂亮的样式,去到Firefox下可能整个页面都变得一团糟(当然也有可能是其他原因)。

举个栗子,IE浏览器下的<ul>标签的margin-left值为30pt,但是在Firefox,Chrome,Safari<ul>默认属性是padding-left:40px。所以我们需要考虑下浏览器兼容性。

###IE盒子模型
http://static.w3ctrain.com/ie_box_model.jpg

###Firefox盒子模型
http://static.w3ctrain.com/firefox_box_model.jpg

##Reset
这时候就有人提出来,这不是很简单吗,两句代码搞定。

1
2
3
4
* {
margin: 0;
padding: 0;
}

确实,使用这两个可以解决paddingmargin的问题,而且现在国内挺多网站都是这么干的,但是这样做会带了很多痛苦的事。

  • 浏览器负担增大,这很好理解,这里使用了通配符*,无论什么元素,你都要在默认的基础上强制设置marginpadding为0。(注意这里使用了强制)
  • 整个页面变得很挤,没有了浏览器默认的呼吸间隔,页面会变得很拥挤,元素都挤在一块,很难看。
  • 加载时间。。。我在网上找到这张图,自己看。
    http://static.w3ctrain.com/load_time.gif
  • 不酷=_=

基于上面的原因,有人提出了加强版的解决方式。这就是Reset.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
...

Reset.css确实帮了很大忙,它把大部分元素都重置了。通配符的问题也就不存在了。

但是,帅的人会认为,Reset的方式还是太生硬了,还有一个比较大的问题是你写一个div的时候,浏览器会生成很大一串重复的代码,特别是当很多个div嵌套的时候,这不利于我们debug(zhuangbi)。
http://static.w3ctrain.com/chrom_dev_tool_div.jpg

##Normalize

Reset趋向于把大部分元素都设成没有加样式的状态,然而这造成我们需要在用到时去重写那大部分“没有样式”的样式…而Normalize.css则趋向于覆盖大部分浏览器异同的默认样式。无论你使用哪种方式,我们最终都需要书写我们自己的代码,但是Normalize会少一些,而且不会造成大量重复代码覆盖。

有人问会问,那Normalize 还是没有解决<ul>的问题啊,(额…上面的例子只是让大家知道浏览器有差异而已),这不是Normalize关注的问题。它不是要强制修改默认样式,而是认为<ul>本身就应该有左间距,这没什么大问题,等到要用的时候再去自定义。所以Normalize造好一个合适的轮子,造车你得自己来。

比如

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/

audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}

注释写得很明白了(优点之一,其他优点可以看推荐阅读),就是修复浏览器的异同。在某某浏览器上会有坑,这里修复掉,再去写你自己的样式表就安全多了。

Normalize.css现在被用得很广。Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks等等网站。

当然最终使用Normalize还是Reset,还得看具体项目和个人喜好了,你看着办。
最后希望日后再无浏览器兼容性问题。。。

##推荐阅读

如需转载,请注明出处: http://w3ctrain.com / 2015/07/09/reset-or-normalize/