2013年4月18日 星期四

[CSS]解決不同瀏覽器版面上的差異

　　在設計網頁完後，開啟瀏覽器執行網頁時，常常會發生使用不同的瀏覽器，導致網頁的顯示結果位移或者跑掉的情況發生，這是因為每一家瀏覽器對於自家的CSS預設值都不一樣，導致原本你使用Google Chrome來瀏覽網頁沒問題，到了使用IE開啟網頁，就會看到怎麼跟Chorme的畫面不太一樣，這就是版面混亂的主要原因之一，因此需要Reset.css來幫助我們統一網頁的版面。



　　Reset CSS其實是一段CSS語法，主要的概念是在程式碼中最前面先載入ResetCss讓瀏覽器的預設值設定成我們想要的，之後就可以放心的去設計你自己的CSS不怕每個瀏覽器會發生不同的情況，當然有時候也會出現特例，或許就要使用Css Hack來調整。

 　　但在這並不推薦使用 CSS Hack，因為會讓語法過於冗長，而且使用的方式蠻特殊的，不是像W3C規定的語法那樣設定，如果有需要這裡有Css Hack可參考（請參考壞掉的印表機）。

 　　目前 Reset CSS 使用率最多的應該就是 YUI 及 Eric Meyer 的版本了。也可以直接套用兩個版本或者可以製作自已的Reset CSS。
補充說明一下：

 　　除了Reset CSS，還有另一種選擇是Normalize CSS，與YUI及Eri Meyer的不同處在於CSS Reset 是清除所有預設的樣式；而 Normalize CSS 則是賦予各種 HTML 元素一個預設的樣式。

 而Normalize CSS 是針對 HTML5 的 CSS 框架，所以支援 HTML5 中新的標籤，包括 video、canvas 等等。如果要做 HTML5 的網頁的話，會非常方便。Normalize CSS 的專案頁面上提供了一個 Demo 的網頁。可以看看各種元素經過 Normalize CSS 標準化之後的模樣。

另外附上Reset CSS連結
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)