CSS Reset 詳細分析

時間 2020-06-22

標籤 css reset 詳細分析欄目 CSS 简体版

原文原文鏈接

最近在看nodejs，《Node.js實戰》這本書果真不錯，按照步驟來，仍是蠻容易上手的，我不是打廣告。。css

我是前端出身，因此搞着搞着就開始想前端的東西。。果真裸寫css如今已經變成一件十分蛋疼的事情，因此琢麼着若是不用baidu的fis，我自個兒加less什麼的，以後就想到，最好仍是搭建一個common.less，裏面能夠放好多mixin什麼的，這樣也能夠爲之後的工做先少點重複勞動，看了下我師父寫的架子，沒想到網上有一個寫的不錯的reset，這裏引用過來，原文請看這裏。html

HTML5 新模塊元素的兼容問題

新增塊元素的默認樣式
下列HTML5新模塊元素在IE八、9版本瀏覽器中沒有被定義默認樣式。爲解決該問題，給下列元素添加「block」顯示屬性。前端

代碼：
```
article,  
aside,  
details,  
figcaption,  
figure,  
footer,  
header,  
hgroup,  
main,  
nav,  
section,  
summary {  
    display: block;  
}
```
特殊新增塊元素
下列HTML5新模塊元素在IE八、9版本瀏覽器中沒有被定義默認樣式，考慮到其特殊性，特爲下列元素添加「inline-block」顯示屬性。node

代碼：
```
audio,
canvas,
video {
   display:inline-block;
   *display:inline; 
   *zoom:1;
}
```

去除行內塊元素之間的水平空隙方案web

代碼：

.display {
    inline-block;
    /* 此處原用於解決IE7兼容性問題，可是會致使background-image失效，請先忽略如下兩條，實踐中暫時沒有發現IE7解決辦法。如有發現請在留言處補充。謝謝！    */
    /*  *display:inline;  */
    /*  *zoom:1; */
}

音頻模塊兼容性問題

　　代碼：

　　audio:not([controls]) {
        display: none; /*爲防止在主流瀏覽器中出現「不帶控制按鈕的音頻模塊」這一問題。*/
        height: 0; /*解決iOS5移動端顯示多餘高度的兼容性問題。 */
    }

特殊模塊樣式處理
處理不存在於 IE 8/9 的樣式。chrome

代碼：
```
[hidden]{
    display:none;
}
```
提升搜索優化
不少新增的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>

Global 全局基本設置

默認字體設置，邊距設置

　　代碼：

html {
    font-family: sans-serif; /* 默認字體 */
    font-size: 100%; /* 在用戶調整窗口大小時，字體大小作相應調整。 */
     -ms-text-size-adjust: 100%; /* IE瀏覽器 */
    -webkit-text-size-adjust: 100%; /* FireFox瀏覽器 */
    overflow-y: auto;
}

去除默認邊距

代碼：

body{
    margin: 0; /* 外邊距 */
    padding: 0; /* 內邊距 */
    border: 0; /* 邊框 */
}

連接相關樣式

代碼：

a {
    text-decoration: none; /* 去除默認下劃線 */
}

a:focus {
    outline:thin dotted; /* 處理「outline」在Chrome瀏覽器中和其它瀏覽器之間的不一致 */
}

a:active, a:hover {
    outline: 0;
}

排版相關樣式

代碼：

h1 { /* 使h1標籤在section標籤和article標籤的留白和字體樣式統一。可同時兼容Firefox 4+、Safari 5和Chrome等不一樣的瀏覽器 */
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;  
    /* 解決首字母樣式在IE8/九、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;
}

* 內嵌文本相關樣式bootstrap

代碼：

img {
    border: 0; /* 在IE8/9瀏覽器中，當img標籤中包含a標籤時，去除img邊框屬性。 */
}

svg:not(:root) {
    overflow: hidden;
}

圖片特寫相關樣式
"figure"標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）canvas

代碼：
```
figure {
    margin: 0;
}
```
表單相關樣式瀏覽器

代碼：

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

Clearfix 可選全局樣式

可兼容IE 6/7瀏覽器app

代碼：

.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 */

Summary 小結

綜述，雖然說是Reset文件，可是每一個網站的需求是不盡相同的，請按照本身項目的需求做個性化調整。以上僅做兼容性解決方案及主流reset.css編寫方案參考，整理自global.css、reset.less、normalize.css及bootstrap網站。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。