很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容。

CSS Reset是什么?

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

为什么要重置它?

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

CSS Reset的内容是什么?

最简单的CSS Reset内容寥寥几行就能完成:

* { padding: 0; margin: 0; border: 0; }

这个方法让所有的选择器的padding、margin和border都设置成0。也有内容更多的,比如YUI的CSS Reset内容:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:'';

}

abbr,acronym { border: 0;

}

以及国外名人Eric Meyer的CSS Reset V1.0|200802内容:

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, 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 {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before,blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

Eric Meyer V2.0|20110126

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

大家可以看得出来,这些内容方法不同,但功能大同小异,都是起到重置的作用,所以说CSS Reset是根据个人需求不同可以按需自定义的。

网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset的更多相关文章

  1. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  2. 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。

    哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...

  3. 解决chrome浏览器在win8下没有注册类的问题

    解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...

  4. 解决IE浏览器缓存导致AJAX请求数据异常

    IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面<head>标签里,加上以下声明: <!-- 解决 ...

  5. 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  6. 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么

    最简单的解决Chrome浏览器主页被hao123.360和2345篡改的方法是什么 一.总结 一句话总结:打开chrome的安装目录,将chrome.exe改成chrome1.exe即可,然后发送一个 ...

  7. Loadrunner解决启动浏览器后页面显示空白

    Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...

  8. 解决火狐浏览器安装不上Selenium IDE插件“此附加组件无法安装”

    (摘自http://blog.sina.com.cn/s/blog_14eea47cb0102w25n.html) 解决火狐浏览器安装不上Selenium IDE插件“此附加组件无法安装” 1.打开火 ...

  9. 利用gulp解决微信浏览器缓存问题

    做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问 ...

随机推荐

  1. MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  2. eclipse 配置jsp

    1.安装jdk和jre 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  3. ES Java 客户端

    标签(空格分隔): ES Java 客户端 节点客户端(node client): 节点客户端本身也是一个ES节点(一般不保存数据,不能成为主节点),它能以无数据节点身份加入到集群中.因为它是集群环境 ...

  4. win10更换登陆背景和关闭锁屏

    更换登陆背景图 用国外一个hacker写的工具,可在github上下载,或者下载我上传到百度网盘的备份.win10默认的登陆背景太难看了. 去掉锁屏图片 登陆界面其实本身就是一种锁屏,为什么还要单独搞 ...

  5. C# CreateProcess的测试

    很奇怪的一个现象,在C#中使用Process来启动进程,启动文件名必须是系统指定的扩展名.EXE,而我使用原生的Win32API ::CreateProcess ()并没有这个限制,以后遇到类似的问题 ...

  6. HDU 6463.超级无敌简单题-卡边界的暴力 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    超级无敌简单题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  7. NBUT 1223 Friends number

    暴力,打表. 计算出每一个数的因子之和,可以枚举$i$,让后将$i$的倍数都加上$i$.发现这样的只有$71$对,然后暴力就可以了. #include<cstdio> #include&l ...

  8. 按照grouip分组,之后分组调用生成正式凭证 的接口

    按照grouip分组,之后分组调用生成正式凭证 的接口 Map<String, List<OperatingLogVO>> resultMap = new HashMap< ...

  9. 读书笔记(高性能javascript)(二)

    5. 字符串和正则表达式: (1) 在大多数浏览器中,数组项合并(Array.prototype.join)比其他字符串连接方法更慢,但它却在IE7及更早版本浏览器中合并大量字符串唯一高效的途径: ( ...

  10. struts2核心配置之Result

    result作用:在struts.xml中,使用<result>元素配置result逻辑视图和物理视图之间的映射 元素属性 属性 说明 是否必须 name 指定逻辑视图的名称(Action ...