老司機教你如何寫出相容性很好的頁面

寫出相容性好的頁面前首先你得把HTML與HTML5學會了，然後CSS，CSS3也有一定的掌握。

通常情況下，不同類型的網站都去認認真真的排版後，對前端就有一定的掌握程度，對寫靜態頁面問題就不大了。至於個數嘛，3個完整網站以上。

提醒：如果要寫出相容性非常好的頁面，js是必不可少的，這對初學前端的人來說，就有點難度了，但也別膽怯，按照學習的先後進度來學習，先學HTML+CSS，再學習HTML5+CSS3，學到一定程式後，再去接觸javascript，就算是自學，HTML+CSS 2個月左右，javascript一個月，肯定是能學出來的。

如果上面的還不會，就去學一下：HTML視頻教程、HTML5教程、SSCSS視頻教程視頻教程、SSCSS視頻教程影片教程、教學。

說太多了，接下來說一下如果寫出相容性好的網頁：

1.文檔聲明不可少:

其實這跟不上什麼直接關係，但為了一個相容性更好，特別是向後相容的頁面，必須要把這個東西寫上：

2.有相容性標籤的盡量不要用

學習的過程當中你就已經有些相容性的了，如果要用，除飛你只想讓該標籤的效果只在某些瀏覽器裡面有效果，特別是H5，現在好些標籤都沒有統一在所有瀏覽器有效。

3、寫CSS之前一定要先清格式

清除標籤格式是必須的，因為大部分標籤都有相容性，但又必須使用，例如ul標籤在ie6,7下默認是有外邊距的，在ie8,火狐，Google下方預設有內邊距。

4、常見瀏覽器bug要避免

例如：在嵌套p中，如果外層p沒有設定邊框，內層p的margin-top會無效，它會直接作用到外層DIV上（也就是外層p margin-top的效果了）

5、子元素浮動，父元素默認包不住子元素的情況

這種情況一般用如果方法處理：

1、給父元素加overflow:hidden; 但這你要保證父元素以後沒有可顯示的元素，不然顯示不了哦。

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2、在最後一個浮動子元素的後面加上一個清浮動的元素

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

3、父級p定義偽類:after 和zoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

原理：IE8以上和非IE瀏覽器才支援:after

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

原理：IE8以上和非IE瀏覽器才支援:after ，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

4、父元素也浮動5、父級p定義overflow:auto 6、父級p定義display:table

rrreee

6、排版結構問題

要想網站兼容性好，就好比建立房子，要想房子建得牢固，框架牢固才是根本，所以說要想網站兼容性好，框架結構一定要好，這樣擴充性也好，前台後台都一個道理。

前台的框架該怎麼建立呢，我覺得可以從如下方面注意：

層次結構要淺析，就是有上、中、下、左、中、右層的概念

結構應該是先做大的，再做小的，例如網頁中間有左右，最好有一個大的表示中間，然後再左，再右

順序最好是先上後下，先左後右，先外後裡，先整體再局部

7、關於定位浮動之類的

有些同學排版的時候，當結構出現偏差的時候，就隨意給元素加定位或是浮動屬性，突然間發現好了，只能說是達到他所認為是視覺效果了，但網頁相容性好不好呢，自己就不得而知了。

這就有點類似於用殺豬刀殺雞，大材小用了，而且用得非常不合適，所以說，該用什麼的什麼再用什麼，不要動不動就定位呀，浮動什麼的。

8、CSS書寫問題

盡量使用父子關係去定義，例如:#top .left img{}，以後這樣擴展性也好，不會出現新class="left"與這個left衝突，只要id不要定義重複就OK。