CSS樣式重置和清除(讓不同瀏覽器顯示效果一致)
發(fā)布時間：2013-05-20 18:02:38 作者：佚名 
我要評論
我要評論CSS樣式清除和重置是前端開發(fā)必需要做的事情，結合了前輩們的經驗整理了一份CSS重置樣式代碼不敢獨享特此與大家分享下，感興趣的朋友可不要錯過了哈
為了讓頁面在各不同瀏覽器之間顯示效果一致，CSS樣式清除和重置是前端開發(fā)必需要做的事情，結合前車之鑒，整理了份CSS重置樣式代碼供參考。
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
dl, dt, dd, ul, ol, li, th, td, div, span, img,
fieldset, lengend, button, input, select, textarea{margin: 0;padding: 0;}
/* color & background */
html{color:#000; background:#FFF;}
/* font */
body, button, input, select, textarea { /* for ie */
font: 12px/18px Arial, Verdana, Microsoft YaHei;
}
/* fix center */
html,body {height: 100%;margin: 0 auto;}
/* h1~h6 */
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
h4, h5, h6 {font-size: 100%;}
/* a */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* list */
ul,ol {list-style: none;}
/* img border */
fieldset,img{border: 0}
/* table */
table {border-collapse: collapse;border-spacing: 0;font:inherit;}
/* margin */
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
/* float & clear */
.left{float:left;}
.right{float:right;}
.clear {clear: both;display: block;}
/* clearfix */
.clearfix:after{content:".";display:block;}
.clearfix{display:inline-table;}
/* Hides from IE-mac */
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}/* IE7 */
復制代碼
代碼如下:@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
dl, dt, dd, ul, ol, li, th, td, div, span, img,
fieldset, lengend, button, input, select, textarea{margin: 0;padding: 0;}
/* color & background */
html{color:#000; background:#FFF;}
/* font */
body, button, input, select, textarea { /* for ie */
font: 12px/18px Arial, Verdana, Microsoft YaHei;
}
/* fix center */
html,body {height: 100%;margin: 0 auto;}
/* h1~h6 */
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
h4, h5, h6 {font-size: 100%;}
/* a */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* list */
ul,ol {list-style: none;}
/* img border */
fieldset,img{border: 0}
/* table */
table {border-collapse: collapse;border-spacing: 0;font:inherit;}
/* margin */
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
/* float & clear */
.left{float:left;}
.right{float:right;}
.clear {clear: both;display: block;}
/* clearfix */
.clearfix:after{content:".";display:block;}
.clearfix{display:inline-table;}
/* Hides from IE-mac */
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}/* IE7 */
相關文章
- 每個瀏覽器都有一套CSS樣式表用于保證網頁正常顯示，為了精準寫出WEB頁面 通常一開始就重新定義標簽樣式，介紹兩個比較不錯的Reset.css 分別來自雅虎YUI和Eric Meyer2014-01-26
- 全局CSS想必大家并不陌生吧，主要就是一些基礎全局的樣式設置，提高書寫效率，本文整理了一些方便大家使用，感興趣的朋友可以了解下2013-09-12
CSS重置(CSS Reset) 讓網頁樣式在各瀏覽器中表現一致
CSS Reset是指重設瀏覽器的樣式,在各種瀏覽器中，都會對CSS的選擇器默認一些數值，譬如當h1沒有被設置數值時，顯示一定大小;有了CSS Reset，讓網頁的樣式在各瀏覽器中表現2012-12-21- reset.css本意就是重置樣式，我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css2012-04-01
- 網頁制作Webjx文章簡介：Eric Meyer Reset和YUI Reset都是非常強大的，但是對于我而言，它們走的太遠了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為2009-04-02
- 網頁制作Webjx文章簡介：本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設置玩reset.css之后需要針對不同項目要首先要設置的內容。2009-04-02
- 這篇文章主要介紹了CSS樣式重置代碼，一般保存為reset.css修改了默認的css設置，方便布局與提高瀏覽器兼容性2014-06-11