1. 默認字體設置,邊距設置html
html { java
font-family: sans-serif; /* 默認字體 */ web
font-size: 100%; /* 在用戶調整窗口大小時,字體大小作相應調整。 */ chrome
-ms-text-size-adjust: 100%; /* IE瀏覽器 */ 瀏覽器
-webkit-text-size-adjust: 100%; /* FireFox瀏覽器 */ app
}ide
2. 去除默認邊距svg
body{ 字體
margin: 0; /* 外邊距 */ spa
padding: 0; /* 內邊距 */
border: 0; /* 邊框 */
}
3. 連接相關樣式
a {
text-decoration: none; /* 去除默認下劃線 */
}
a:focus {
outline:thin dotted; /* 處理「outline」在Chrome瀏覽器中和其它瀏覽器之間的不一致 */
}
a:active, a:hover {
outline: 0;
}
4. 排版相關樣式
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";
}
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;
}
5. 內嵌文本相關樣式
img {
border: 0; /* 在IE8/9瀏覽器中,當img標籤中包含a標籤時,去除img邊框屬性。 */
}
svg:not(:root) {
overflow: hidden;
}