CSS Reset 详细分析_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:35:53
Original
1620 people have browsed it

    最近在看nodejs,《Node.js实战》这本书果然不错,按照步骤来,还是蛮容易上手的,我不是打广告。。

    我是前端出身,所以搞着搞着就开始想前端的东西。。果然裸写css现在已经变成一件十分蛋疼的事情,所以琢么着如果不用baidu的fis,我自个儿加less什么的,之后就想到,最好还是搭建一个common.less,里面可以放好多mixin什么的,这样也可以为以后的工作先少点重复劳动,看了下我师父写的架子,没想到网上有一个写的不错的reset,这里引用过来,原文请看这里。

    

HTML5 新模块元素的兼容问题

  • 新增块元素的默认样式
    下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式。为解决该问题,给下列元素添加“block”显示属性。

    代码:

    article,  aside,  details,  figcaption,  figure,  footer,  header,  hgroup,  main,  nav,  section,  summary {      display: block;  }
    Copy after login

  • 特殊新增块元素
    下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加“inline-block”显示属性。

    代码:

    audio,canvas,video {   display:inline-block;   *display:inline;    *zoom:1;}
    Copy after login

  • 去除行内块元素之间的水平空隙方案

    代码:

    .display {    inline-block;    /* 此处原用于解决IE7兼容性问题,但是会导致background-image失效,请先忽略以下两条,实践中暂时没有发现IE7解决办法。若有发现请在留言处补充。谢谢!    */    /*  *display:inline;  */    /*  *zoom:1; */}
    Copy after login

  • 音频模块兼容性问题
  •   代码:

      
    Copy after login

      audio:not([controls]) {        display: none; /*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/        height: 0; /*解决iOS5移动端显示多余高度的兼容性问题。 */    }
    Copy after login

  • 特殊模块样式处理
    处理 不存在于 IE 8/9 的样式。

    代码:

    [hidden]{    display:none;}
    Copy after login

  • 提高搜索优化
    很多新增的HTML模块元素在搜索优化上也起到不可轻视的作用。
  •   代码:

    address { /* 屏幕阅读器和搜索引擎找到地址或电话号码,默认样式是 display: block */  display: block;}<address>    <p>address:detail</p>    <p>       <a href="tel:+12233444">1223334444</a>    </p>    <p>       <a href="mailto:address@mail.com">address@mail.com</a> /* 亦可标记电子邮件地址 */    </p></address>
    Copy after login

    Global 全局基本设置

  • 默认字体设置,边距设置
  •   代码:

    html {    font-family: sans-serif; /* 默认字体 */    font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整。 */     -ms-text-size-adjust: 100%; /* IE浏览器 */    -webkit-text-size-adjust: 100%; /* FireFox浏览器 */    overflow-y: auto;}
    Copy after login

  • 去除默认边距
  • 代码:

    body{    margin: 0; /* 外边距 */    padding: 0; /* 内边距 */    border: 0; /* 边框 */}
    Copy after login

  • 链接相关样式
  • 代码:

    a {    text-decoration: none; /* 去除默认下划线 */}a:focus {    outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */}a:active, a:hover {    outline: 0;}
    Copy after login

  • 排版相关样式
  • 代码:

    h1 { /* 使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4+、Safari 5和Chrome等不同的浏览器 */    font-size: 2em;    margin: 0.67em 0;}abbr[title] {    border-bottom: 1px dotted;      /* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */}b,strong {    font-weight: bold; /* 添加加粗样式,应用于Firefox 4+、Safari 5和Chrome */}dfn {    font-size:italic; /* 添加斜体样式,应用于Safari 5和chrome */}hr {    /* 解决其在Firefox中的兼容性问题 */    -moz-box-sizing: content-box;    box-sizing: content-box;    height: 0;}mark { /* 解决其在IE8/9中样式未定义的问题 */    background: #ff0;     color: #000;}code,kbd,pre,samp { /* 更正关联字体在Safari 5和Chrome中的老式设置 */    font-family: monospace, serif;    font-size: 1em;}pre { /* 提高pre标签格式化文本在所有浏览器中的可读性 */    white-space: pre-wrap;}q { /* 设置相一致的引号类型 */    quotes: "\201C" "\201D" "\2018" "\2019";}q:before, q:after, blockquote:before, blockquote:after {     content: ""; }small { /* 统一所有浏览器中字体大小不一致的兼容性问题 */    font-size: 80%;}sub, sup { /* 在所有浏览器中,防止“sub”和“sup”标签影响“line-height”属性 */    font-size: 75%;    line-height: 0;    position: relative;    vertical-align: baseline;}sup {    top: -0.5em;}sub {    bottom: -0.25em;}small {  font-size: 85%;}strong {  font-weight: bold;}em {  font-style: italic;}cite {  font-style: normal;}ul,ol {  padding: 0;  margin: 0 0 10px 25px;}dl {  margin-bottom: 20px;}li {  line-height: 20px;}dt,dd {  line-height: 20px;}dt {  font-weight: b d;}dd {  margin-left: 10px;}
    Copy after login

    * 内嵌文本相关样式

    代码:

    img {    border: 0; /* 在IE8/9浏览器中,当img标签中包含a标签时,去除img边框属性。 */}svg:not(:root) {    overflow: hidden;}
    Copy after login

  • 图片特写相关样式
    "figure"标签规定独立的流内容(图像、图表、照片、代码等等)

    代码:

    figure {    margin: 0;}
    Copy after login

  • 表单相关样式

  • 代码:

    fieldset { /* 定义一致的边框、内边距和外边距 */    border: 1px solid #c0c0c0;    margin: 0 2px;    padding: 0.35em 0.625em 0.75em;}legend {    border: 0; /* 更改“color”属性在IE8/9浏览器中没有被继承的问题 */    padding: 0; /* 去除外边距,如此即使人们将字段集归零也不会失去样式 */ }button,input,select,textarea {    font-family: inherit; /* 更改关联字体属性在IE8/9浏览器中没有被继承的问题 */    font-size: 100%; /* 更改字体大小属性在IE8/9浏览器中没有被继承的问题 */    margin: 0; /* 调整边距设置在Firefox 4+, Safari 5, 和 Chrome浏览器中的兼容性问题 */}button,input {    line-height: normal;     /* 调整Firefox 4+浏览器下,客户端样式表中设置了“!important”的“line-height”属性的input表单 */}button,select {    text-transform: none;    /**     * 调整“button”和“select”的“text-transform”继承不一致性的问题     * 其他表单控件元素不继承“text-transform”属性     * 修正“button”标签在Chrome, Safari 5+, and IE 8+中的样式继承问题     * 修正“select”标签在Firefox 4+ 和Opera中的样式继承问题     */ }button,html input[type="button"], /* 避免webKit bug发生在Android 4.0.* 设备上,破坏原生“audio”和“video”控制组件 */input[type="reset"],input[type="submit"] {     -webkit-appearance: button; /* 改正iOS设备中“input”类型表单样式不可用的问题 */    cursor: pointer; /* 增强光标样式在input表单和其他表单的可用性和一致性 */}button[disabled],html input[disabled] {    cursor: default; /* 为禁用表单重设定默认光标样式 */}input[type="checkbox"],input[type="radio"] {    box-sizing: border-box; /* 调整IE 8/9中尺寸属性设置为“内容框”的盒子模型 */    padding: 0; /* 去除IE 8/9中的多余的外边距留白部分 */}input[type="search"] {    -webkit-appearance: textfield; /* 兼容Safari 5 and Chrome上 “searchfield” 上设置 “appearance”属性 */    -moz-box-sizing: content-box;    -webkit-box-sizing: content-box; /* 兼容Safari 5 and Chrome上 “border-box” 上设置 “box-sizing”属性 */    box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {    -webkit-appearance: none;    /* 去除OS X系统上Safari 5和Chrome中容器内边距和搜索取消按钮属性 */}button::-moz-focus-inner,input::-moz-focus-inner { //Firefox 4+浏览器中,去除容器内边距和边框属性    border: 0;    padding: 0;}textarea {    overflow: auto; /* IE 8/9中,去除默认垂直滚动条属性 */    vertical-align: top; /* 提高所有浏览器中的文本可读性和版式 */} table { /* 删除表格单元格之间的间距。 */    border-collapse: collapse;    border-spacing: 0;}
    Copy after login

    Clearfix 可选全局样式

  • 可兼容IE 6/7浏览器

    代码:

    .clearfix {    *zoom:1}.clearfix:before,.clearfix:after {    display:table;    line-height:0;    content:""}.clearfix:after {    clear:both}*html .clearfix {     zoom: 1;} /* IE6 */*:first-child+html .clearfix {     zoom: 1;} /* IE7 */
    Copy after login

     

  • Summary 小结

    综述,虽说是Reset文件,但是每个网站的需求是不尽相同的,请按照自己项目的需求作个性化调整。以上仅作兼容性解决方案及主流reset.css编写方案参考,整理自global.css、reset.less、normalize.css及bootstrap网站。

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!