解決 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

Jerous

跨領域跨到劈腿,網站前端的路途,一路向前。前擋設計,後攻工程。

想知道更多嗎?

填入常用的電子郵件,即可在第一時間獲取最新知識!

Subscription Form