HTML5之旅(1) CSS Reset 反璞归真
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 276
所有做WEB开发的人遇到的第一个问题就是浏览器表现不一致。由于大大小小数十种的浏览器对HTML标签的默认样式初始值不统一(即便同是壳浏览器,360与搜狗于IE还是有些小区别。例如这个http://a

所有做WEB开发的人遇到的第一个问题就是浏览器表现不一致。由于大大小小数十种的浏览器对HTML标签的默认样式初始值不统一(即便同是壳浏览器,360与搜狗于IE还是有些小区别。例如这个http://apps.hi.baidu.com/share/detail/31218381),导致页面在不同浏览器下显示不统一,甚至错位。在移动互联网时代,虽说不考虑IE6这个朽木老头,但是五花八门的浏览器门派还是让人蛋疼。

所以上帝说,一定要有“CSS Reset”。CSS Reset 意思是样式重置,它就是一套CSS样式,它通过指定规范的HTML元素样式,让页面在所有浏览器下实现统一展现,还可以预防某些莫名奇妙的BUG。CSS Reset 就像一道照耀在浏览器上的光芒,让一切都 反璞归真。

 

CSS Reset 最简实例:

* { margin: 0; padding: 0; } 

这是一个最简单的例子,清除所有元素的外边距和内边距,被许多人采用。但这种方式貌似被前端界批判着: 1) 使用*会导致遍历整个页面的元素,页面渲染效率低下 2)对于表单元素会造成异常 (http://css-tricks.com/119-margin-0-padding-0-no-longer-cool/)

在这里我推荐使用以下流行方案:

1.Eric Meyer CSS Reset (流传最广)

2.YUI CSS Reset (来自鼎鼎大名的YUI)

3.KISSY CSS Reset (来自淘宝开源项目KISSY)

个人更倾向使用ERIC,直接贴出代码:

/* 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;
}


NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON

其他相关:打造自己的reset.css http://shawphy.com/2009/03/my-own-reset-css.html

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2