網頁設計

關於網頁設計的技術或相關資訊分享

解決IE與Firefox等瀏覽器衝突─Reset CSS

  相信大家一定都有在網頁設計時,因為所使用的瀏覽器不同或版本不同,導致頁面的顯示結果不同的情況發生吧!這是因為各家瀏覽器對於CSS樣式表有著各自的預設值,如果有沒定義到的地方,各家瀏覽器就會依照自己的預設值去給HTML使用,這樣就會造成版面的混亂,這時候就需要Reset CSS了。

  Reset CSS其實是一段CSS語法,他先把各家瀏覽器的設定值都調到一樣,這樣你在開始寫CSS的時候,就可以不用擔心因為瀏覽器的不同造成不同的效果,當然還是會有例外的情況(例如某版本瀏覽器的margin就是硬是要是別人的兩倍XD),這種瀏覽器本身的BUG造成頁面顯示和預期的不一樣的情況,就不是Reset CSS可以解決的,那種時候就要靠其他的方法來解決。

套用Reset CSS的方法有兩個

方法一:HTML直接連結CSS

在HTML原始檔中</head>之前加入下面這段的語法

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css"/ >

方法二:直接加入CSS樣式表中

在CSS原始檔中加入下面這段的CSS

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

  你問我這有用嗎?這方法是Yahoo提供的,畢竟人家也是間大公司,還是值得用一下的,我個人的使用經驗是還頗良好的。

Reference: Yahoo! Developer Network