前端開發時需要注意的要點 避免瀏覽器安全色問題

標籤：

本篇文章主要寫給剛步入前端開發行列的新手構架師。

新手前端構架師在書寫html代碼時由於不太瞭解xhtml規範，經常會胡亂的使用html標籤進行代碼嵌套，導致多個瀏覽器顯示不相容。回過頭來又為修改瀏覽器BUG 使用各種hack進行補救，最終是苦了自己苦了使用者。

瀏覽器的樣式BUG實際上是由於每個年代的瀏覽器解析規則不一樣導致，每個年代的瀏覽器都會帶有自己的“小脾氣”，這就是為什麼自己寫出來的一個頁面，在不同的瀏覽器中顯示的樣式都不盡相同。

本文將會講述如何在編寫代碼時如何梳理思路，引導大家使用正確的代碼書寫規範，告別五花八門的相容問題。

在瞭解規範之前，我們要先瞭解一下瀏覽器的BUG。由於微軟在瀏覽器領域一直未完全遵循W3C規範，導致IE中的各個版本都會出現不同的樣式 BUG。在IE中BUG主要多發在IE6中，IE7會出現少量的寬度問題，IE8中的BUG主要集中在濾鏡中。由於IE7、IE8的BUG都比較容易解 決，因此本文不多闡述。如果需要瞭解關於IE的常見BUG與解決方案，請查閱博文“IE6中的常見BUG與相應的解決辦法”。

一、頁面代碼的實現順序與步驟策劃

做任何事情都要先做好計劃再執行，對於寫前端代碼也不例外。我們在拿到美工設計的PSD後，需要先對頁面結果做好足夠的分析。思考頁面分為幾大塊，我應該使用什麼樣的標籤，什麼樣浮動等等；如何將早期架構搭建起來。

 

如所示；這是一個類似企業網站的模板，第一眼看上去內容非常複雜，但是通過對頁面的仔細觀察我們可以發現，這個頁面是由左側部分、右側部分、頁面腳部 三塊組成。

所以我們第一步需要做的是將頁面按照三個區塊搭建起來，並確定好左右平行元素的寬度，使其能夠在各瀏覽器中正常的顯示。做完這一步，我們就已經為頁面的建設打好了基礎。

後面我們就需要開始對大塊元素中的內容進行進一步區分，觀察有幾個模組，有沒有相同的模組，css樣式是否可以複用。在搭建細小模組時需要注意，盡 量用區塊層級元素定位，float浮動元素不要與區塊層級元素在同一列中。如果需要在同一列中有平鋪的多個元素，請給這些元素都加上float屬性，並設定好對應 的寬度。

二、瞭解各標籤的屬性與內建樣式

很多新手並不清楚HTML的各類標籤的具體含義。剛開始書寫div+css代碼時，大量甚至完全使用div進行布局。雖然在CSS中可以修改div的樣式屬性，但是這樣做帶來的問題就是代碼無法有效進行鑒別，容易造成閉合div的漏寫。

因此我們需要仔細閱讀html參考手冊，瞭解哪些標籤可以直接平鋪在同一列中，哪些標籤為區塊層級元素，只能一一向下排列，哪些元素不會影響布局的樣式等等。

三、牢記瀏覽器常見BUG的處理方式，在代碼第一次編寫時就考慮解決相容問題

其實在第一次編寫代碼時，就已經可以開始考慮元素的樣式是否會引起其他瀏覽器的相容問題，防範於未然。

舉個常見的例子：IE中float元素如果同時設定了margin值，此時margin的值會變為雙倍，解決辦法是在該元素中加入 display:inline。已知了BUG的解決辦法，我們就可以在代碼編寫時養成一個習慣。比如說我們在為元素添加了float和margin值時， 就為這個元素補上一個display:inline 這樣就可以有效避免頁面出現雙倍邊距的BUG。

所以在工作中要不斷的記錄與總結瀏覽器BUG的處理方式，並思考其規律與特性，在下一次編寫代碼時，提前加上相應的相容性BUG處理的代碼。通過不斷的經驗積累，慢慢的會發現自己所寫的代碼可以正常的在各瀏覽器中展現。

四、儘可能的少用，甚至不要使用負數的margin和padding

一般使用負數的margin和padding時，都是由於樣式無法按照自己需要的方式移動，才“出此下策”。這麼做很可能會給未來的元素樣式帶來很多奇怪的BUG，使後面的工作更加艱難。

如果遇到確實需要移動到一些元素之外的位移操作，最好的方法是使用position來對元素進行定位。因為position這個屬性定義是建立元素 布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個塊級框，而不論該元素本身是什麼類型。因此我們使用position進行一些特殊 的定位操作時最為理想的。

五、每一列浮動元素後，都要設定清除浮動

元素進行float操作後，會使元素浮出文檔流，使其所在的父級元素無法跟隨浮動元素的高度而改變自身高度。所帶來的問題就是浮動元素超出了父級元素的包裹範圍，若後面跟隨有文字、或浮動元素，則會造成布局混亂。

因此我們在每一列的浮動元素代碼最後都要進行清除浮動，使整個父級元素能夠正常的包裹其內部的浮動元素，避免這些調皮的float元素四處搗亂。

最簡單的清除浮動的方法是在最後一個浮動元素的後面加上<div style=”clear:both”></div>

• 本文固定連結: http://www.frontopen.com/1129.html
• 轉載請註明: 品味人生 2013年07月17日 於 前端開拓者 發表

前端開發時需要注意的要點 避免瀏覽器安全色問題