前端開發時須要注意的要點 避免瀏覽器兼容問題

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

新手前端構架師在書寫html代碼時因爲不太瞭解xhtml規範，常常會胡亂的使用html標籤進行代碼嵌套，致使多個瀏覽器顯示不兼容。回過頭來又爲修改瀏覽器BUG 使用各類hack進行補救，最終是苦了本身苦了用戶。

瀏覽器的樣式BUG其實是因爲每一個年代的瀏覽器解析規則不同致使，每一個年代的瀏覽器都會帶有本身的「小脾氣」，這就是爲何本身寫出來的一個頁面，在不一樣的瀏覽器中顯示的樣式都不盡相同。

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

在瞭解規範以前，咱們要先了解一下瀏覽器的BUG。因爲微軟在瀏覽器領域一直未徹底遵循W3C規範，致使IE中的各個版本都會出現不一樣的樣式 BUG。在IE中BUG主要多發在IE6中，IE7會出現少許的寬度問題，IE8中的BUG主要集中在濾鏡中。因爲IE七、IE8的BUG都比較容易解 決，所以本文很少闡述。若是須要了解關於IE的常見BUG與解決方法，請查閱博文「IE6中的常見BUG與相應的解決辦法」。

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

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

 

如上圖所示；這是一個相似企業網站的模板，第一眼看上去內容很是複雜，可是經過對頁面的仔細觀察咱們能夠發現，這個頁面是由左側部分、右側部分、頁面腳部 三塊組成。

因此咱們第一步須要作的是將頁面按照三個區塊搭建起來，並肯定好左右平行元素的寬度，使其可以在各瀏覽器中正常的顯示。作完這一步，咱們就已經爲頁面的建設打好了基礎。

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

2、瞭解各標籤的屬性與內置樣式

不少新手並不清楚HTML的各種標籤的具體含義。剛開始書寫div+css代碼時，大量甚至徹底使用div進行佈局。雖然在CSS中能夠修改div的樣式屬性，可是這樣作帶來的問題就是代碼沒法有效進行鑑別，容易形成閉合div的漏寫。

所以咱們須要仔細閱讀html參考手冊，瞭解哪些標籤能夠直接平鋪在同一列中，哪些標籤爲塊級元素，只能一一貫下排列，哪些元素不會影響佈局的樣式等等。

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

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

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

因此在工做中要不斷的記錄與總結瀏覽器BUG的處理方式，並思考其規律與特性，在下一次編寫代碼時，提早加上相應的兼容性BUG處理的代碼。經過不斷的經驗積累，慢慢的會發現本身所寫的代碼能夠正常的在各瀏覽器中展示。

4、儘量的少用，甚至不要使用負數的margin和padding

通常使用負數的margin和padding時，都是因爲樣式沒法按照本身須要的方式移動，才「出此下策」。這麼作極可能會給將來的元素樣式帶來不少奇怪的BUG，使後面的工做更加艱難。

若是遇到確實須要移動到一些元素以外的偏移操做，最好的方法是使用position來對元素進行定位。由於position這個屬性定義是創建元素 佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。所以咱們使用position進行一些特殊 的定位操做時最爲理想的。

5、每一列浮動元素後，都要設置清除浮動

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

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

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

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