重置瀏覽器默認(rèn)樣式
發(fā)布時間:2009-11-12 23:32:17 作者:佚名
我要評論
作為一個半路出家的的csser,偶深深滴理解小鳥們滴郁悶之處。其中最讓鳥頭大的就是相同的CSS在不同的瀏覽器下表現(xiàn)出不同滴鳥樣兒。
不同的瀏覽器對CSS的兼容問題在學(xué)習(xí)及運(yùn)用過程中占到了絕大部分。作為一個閉門造車的學(xué)鳥~偶是一路google+baidu過來的,雖然到現(xiàn)在還是鳥~但還是要慢慢總結(jié)。
為了盡可能從開始就減少問題的產(chǎn)生,鳥們需要在開始寫CSS的時候就把各個不同的瀏覽器樣式重置到一個樣子~以減少后面打補(bǔ)丁的數(shù)量和降低問題產(chǎn)生的可能性。要知道,有時候分析問題產(chǎn)生的根源比解決問題所花費(fèi)的時間要多的多得多。關(guān)于如何快速定位頁面中復(fù)雜的css bug 的問題,請參閱懌飛的這篇文章
不同瀏覽器對于相同元素的默認(rèn)樣式并不一致,這也是為什么我們在CSS的最開始要寫 * {padding:0;marging:0};
不過現(xiàn)在說的可不只是這些?;旧希煌瑑?nèi)核的兩個瀏覽器在某些元素的表現(xiàn)都會存在差異,比如縮進(jìn)的大小、字體選擇、字符樣式等。也許一個很 漂亮的CSS樣式表在一個瀏覽器上表現(xiàn)良好,在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結(jié)構(gòu)混亂起來,我都是瀏覽器默認(rèn)樣式在作怪。
因此,我們在生成CSS樣式規(guī)則的時候,一個必做的步驟就是重設(shè)瀏覽器的默認(rèn)樣式,也就是覆蓋掉瀏覽器的默認(rèn)樣式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差異(元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進(jìn)采用了margin縮進(jìn)和padding縮進(jìn))。例如下面這段代碼:
<h1> Headlines are very important Elements in XHTML</h1>
這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是系統(tǒng)默認(rèn)字體。因此我們要為<h1>在CSS中設(shè)定一個統(tǒng)一的樣式。
但是,如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設(shè)定全局樣式,那么一個很明顯的問題就會出現(xiàn),比如像form元素、input 元素、textarea等在某些瀏覽器中會忽略對它們的重新設(shè)定,更重要的是這將會嚴(yán)重破壞這些元素的外觀,所以你又不得不去手動去一一為它們重新設(shè)定一 個padding值和margin值。所以我們應(yīng)該放棄簡單地使用“*”,而是為第一個存在表現(xiàn)不一致的元素進(jìn)行重設(shè),如 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
同時,元素的默認(rèn)樣式可能會破壞頁面的外觀。比如<b>元素會把文字加粗,<blockquote>會大段縮進(jìn),<em>會使文字傾斜等,如果你想要求頁 面文本外觀一致的話,也應(yīng)該在CSS中把這些元素的外觀進(jìn)行重設(shè)。同時,有時候我們要求這些元素的外觀和父元素一樣,可以直接使用 inherit從父元素繼承即可。
至于哪些元素應(yīng)該被重設(shè)?Yahoo!已經(jīng)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議,你需要把這些規(guī)則放到一個名為Reset.css的文件中單獨(dú)引用(推薦這種做法):
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
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;
}
你要做的就是把這些規(guī)則簡單地保存到reset.css中,然后在頁面中使用。在需要給這些元素增加新的樣式的時候,和其它元素的設(shè)定沒有什么不同。
注意:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認(rèn)識,這樣的設(shè)定是為了使在Internet Explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是因?yàn)樵贗nternet Explorer中l(wèi)engend元素使用字體顏色和系統(tǒng)有關(guān)(甚至和系統(tǒng)風(fēng)格有關(guān))。這里還要指出的 是,html{color:#000;background:#FFF;} 這條規(guī)則雖是細(xì)節(jié),卻很重要,因?yàn)樵谀承r候他直接影響了頁面的整體外觀,百度就存在這樣的設(shè)計(jì)失誤(雅虎沒似乎也沒有給這一條,但是在某個示例中似乎出 現(xiàn)了)。
和Yahoo!一樣,Eric Meyer在他的網(wǎng)站也給出了一個新的寫法:
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, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
PS:在做網(wǎng)站時,遇到這樣的問題。各個瀏覽器兼容的問題,單寫好CSS不行,還得對其進(jìn)行初始化,這樣,在各個瀏覽器上運(yùn)行頁面才不會變形。本人正研究中,希望有經(jīng)驗(yàn)的朋友也給我指教一下。。
/*初始化頁面*/
* { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html {overflow:-moz-scrollbars-vertical;}
/*將gridview的邊框看不見*/
table td{
border:none;
}
為了盡可能從開始就減少問題的產(chǎn)生,鳥們需要在開始寫CSS的時候就把各個不同的瀏覽器樣式重置到一個樣子~以減少后面打補(bǔ)丁的數(shù)量和降低問題產(chǎn)生的可能性。要知道,有時候分析問題產(chǎn)生的根源比解決問題所花費(fèi)的時間要多的多得多。關(guān)于如何快速定位頁面中復(fù)雜的css bug 的問題,請參閱懌飛的這篇文章
不同瀏覽器對于相同元素的默認(rèn)樣式并不一致,這也是為什么我們在CSS的最開始要寫 * {padding:0;marging:0};
不過現(xiàn)在說的可不只是這些?;旧希煌瑑?nèi)核的兩個瀏覽器在某些元素的表現(xiàn)都會存在差異,比如縮進(jìn)的大小、字體選擇、字符樣式等。也許一個很 漂亮的CSS樣式表在一個瀏覽器上表現(xiàn)良好,在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結(jié)構(gòu)混亂起來,我都是瀏覽器默認(rèn)樣式在作怪。
因此,我們在生成CSS樣式規(guī)則的時候,一個必做的步驟就是重設(shè)瀏覽器的默認(rèn)樣式,也就是覆蓋掉瀏覽器的默認(rèn)樣式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差異(元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進(jìn)采用了margin縮進(jìn)和padding縮進(jìn))。例如下面這段代碼:
<h1> Headlines are very important Elements in XHTML</h1>
這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是系統(tǒng)默認(rèn)字體。因此我們要為<h1>在CSS中設(shè)定一個統(tǒng)一的樣式。
但是,如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設(shè)定全局樣式,那么一個很明顯的問題就會出現(xiàn),比如像form元素、input 元素、textarea等在某些瀏覽器中會忽略對它們的重新設(shè)定,更重要的是這將會嚴(yán)重破壞這些元素的外觀,所以你又不得不去手動去一一為它們重新設(shè)定一 個padding值和margin值。所以我們應(yīng)該放棄簡單地使用“*”,而是為第一個存在表現(xiàn)不一致的元素進(jìn)行重設(shè),如 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
同時,元素的默認(rèn)樣式可能會破壞頁面的外觀。比如<b>元素會把文字加粗,<blockquote>會大段縮進(jìn),<em>會使文字傾斜等,如果你想要求頁 面文本外觀一致的話,也應(yīng)該在CSS中把這些元素的外觀進(jìn)行重設(shè)。同時,有時候我們要求這些元素的外觀和父元素一樣,可以直接使用 inherit從父元素繼承即可。
至于哪些元素應(yīng)該被重設(shè)?Yahoo!已經(jīng)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議,你需要把這些規(guī)則放到一個名為Reset.css的文件中單獨(dú)引用(推薦這種做法):
復(fù)制代碼
代碼如下:html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
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;
}
你要做的就是把這些規(guī)則簡單地保存到reset.css中,然后在頁面中使用。在需要給這些元素增加新的樣式的時候,和其它元素的設(shè)定沒有什么不同。
注意:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認(rèn)識,這樣的設(shè)定是為了使在Internet Explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是因?yàn)樵贗nternet Explorer中l(wèi)engend元素使用字體顏色和系統(tǒng)有關(guān)(甚至和系統(tǒng)風(fēng)格有關(guān))。這里還要指出的 是,html{color:#000;background:#FFF;} 這條規(guī)則雖是細(xì)節(jié),卻很重要,因?yàn)樵谀承r候他直接影響了頁面的整體外觀,百度就存在這樣的設(shè)計(jì)失誤(雅虎沒似乎也沒有給這一條,但是在某個示例中似乎出 現(xiàn)了)。
和Yahoo!一樣,Eric Meyer在他的網(wǎng)站也給出了一個新的寫法:
復(fù)制代碼
代碼如下: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, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
PS:在做網(wǎng)站時,遇到這樣的問題。各個瀏覽器兼容的問題,單寫好CSS不行,還得對其進(jìn)行初始化,這樣,在各個瀏覽器上運(yùn)行頁面才不會變形。本人正研究中,希望有經(jīng)驗(yàn)的朋友也給我指教一下。。
復(fù)制代碼
代碼如下:/*初始化頁面*/
* { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html {overflow:-moz-scrollbars-vertical;}
/*將gridview的邊框看不見*/
table td{
border:none;
}
相關(guān)文章
我的css框架——base.css(重設(shè)瀏覽器默認(rèn)樣式)
有自己css框架在網(wǎng)頁布局過程中會顯得相當(dāng)容易,本文提供的是本人的經(jīng)驗(yàn)之談主要功能在于重設(shè)瀏覽器默認(rèn)樣式,熱愛布局的你可千萬不要錯過了哈,希望可以幫助到你2013-03-19CSS重置(CSS Reset) 讓網(wǎng)頁樣式在各瀏覽器中表現(xiàn)一致
CSS Reset是指重設(shè)瀏覽器的樣式,在各種瀏覽器中,都會對CSS的選擇器默認(rèn)一些數(shù)值,譬如當(dāng)h1沒有被設(shè)置數(shù)值時,顯示一定大小;有了CSS Reset,讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)2012-12-21- reset.css本意就是重置樣式,我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進(jìn)typography.css2012-04-01
- 網(wǎng)頁制作Webjx文章簡介:本文就是來介紹如何寫一個合適所有項(xiàng)目的通用的reset.css,以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。2009-04-02
- CSS樣式清除和重置是前端開發(fā)必需要做的事情,結(jié)合了前輩們的經(jīng)驗(yàn)整理了一份CSS重置樣式代碼不敢獨(dú)享特此與大家分享下,感興趣的朋友可不要錯過了哈2013-05-20

