CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致
2012-12-21 14:32
615 查看
CSS Reset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。
下面介绍几个主流的CSS Reset代码:
1、Eric Meyer
2、YUI
3、csslab
需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。
下面介绍几个主流的CSS Reset代码:
1、Eric Meyer
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; }
2、YUI
/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix,should I group by selector or property for weight savings? */ html { color:#000; background:#FFF; } /* TODO remove settings on BODY since we can't namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } /* TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit... */ address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; font-variant:normal; } /* to preserve line-height and selector appearance */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ input,textarea,select { *font-size:100%; } /*because legend doesn't inherit in IE */ legend { color:#000; }
3、csslab
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, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; } article, aside, nav, section, dialog, figure, header, footer, hgroup { display:block; } legend { display:none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } a img, iframe { border: none; } ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } input, select { vertical-align:middle; } select { margin: inherit; } button { border: 0; padding: 0; background: transparent; cursor: pointer; } /* Fixes incorrect placement of numbers in ol's in IE6/7 */ ol { margin-left:2em; } /* ========================================= clearfix == */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;}
需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。
相关文章推荐
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
- 浏览器兼容CSS基础样式,重置CSS样式,早日脱离IE6
- CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言
- Normalize.css的功能用处,是不是重置浏览器默认样式表?
- 菜鸟CSSer之-重置浏览器默认样式
- CSS RESET —— 浏览器样式重置
- 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
- htmlcss笔记--标签默认值样式重置css reset
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不全然一致
- 没人性的js / 重置浏览器默认样式/虚线/css引用/空格/页面边距/rails tag/字体
- 用reset.css重置浏览器默认样式的重要性
- 重置浏览器的默认样式(css reset)
- CSS重置样式
- 精通 CSS+DIV 网页样式与布局 86
- js 获取浏览器版本以此来调整CSS的样式
- 精通 CSS+DIV 网页样式与布局 104
- 解决在IE8浏览器下css+div网页不能居中的问题
- htmlcss笔记--标签默认值样式重置css reset(2)
- Html(css)样式控制浏览器的兼容性问题的相关教程