css重设样式_清除浏览器的默认样式

时间: 2018-04-11阅读: 1581标签: 浏览器

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

收集的默认样式的链接地址:

1.eric-meyer-reset-css
http://cssreset.com/scripts/eric-meyer-reset-css/
2.html-5-reset-stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
3.yahoo-css-reset-yui-3
http://cssreset.com/scripts/yahoo-css-reset-yui-3/
4/universal-selector-css-reset
http://cssreset.com/scripts/universal-selector-css-reset/
5normalize-css
http://cssreset.com/scripts/normalize-css/


下面介绍几个主流的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并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。  

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/623

浏览器多标签页通信

浏览器多标签页通信有助于降低服务器负载,提高运营人员的工作效率,提高用户体验。是前端开发优化的一个重要环节。分别是使用cookie、使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedWorker,每种方法各有利弊。如果不考虑兼容旧的浏览器,superSharedWorker 或许是最好的解决方案

监听浏览器刷新及关闭

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。

禁止(防止)浏览器自动填充密码

由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

Vue单页面应用阻止浏览器记住密码

现象1:路由切换时再次提示是否记住密码,解决办法:这其实是个代码bug,在登录页面,用form把输入框都包起来就行了。现象2:autocomplete=off无效

浏览器storage你真的会用吗

html5标准localstorage和sessionStorage 为现代浏览器提供用户会话级别的数据存取。它们允许你访问一个Document 源(origin)的对象 Storage,也就是在遵守同源策略情况下存取数据。

重探浏览器事件(浅析事件编程化)

在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来.不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了.

Chrome浏览器语音自动播放功能

Chrome浏览器为了屏蔽带声音的骚扰广告,从66版本后不再允许自动播放语音,我做的项目需要实时语音提示报警信息,网上搜索了好久都说不再支持自动播放,知道碰到一个大神提供建议设置Chrome浏览器允许声音自动播放:

可怕的“浏览器指纹”,让你在互联网上,无处可藏

你是一个好色之徒。别问我怎么知道的,我了解你,虽然我不知道你是谁。科技公司通过大数据,会对你进行一个大体的画像,然后按照你的喜好推送信息。比如一些精准的广告,刺激你荷尔蒙的小视频等。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广