瀏覽器安全色性問題及常見的解決方案，瀏覽器安全色性

瀏覽器安全色性問題及常見的解決方案，瀏覽器安全色性

一.什麼是瀏覽器安全色性問題

      瀏覽器安全色性問題又稱網頁相容性和網站相容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致二產生瀏覽器和網頁間的相容問題。在網站的設計和製作中，做好瀏覽器安全色，才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計，瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。

二.瀏覽器安全色性問題產生原因

     因為不同瀏覽器使用核心及所支援的HTML等網頁語言標準不同；以及使用者用戶端的環境不同（如解析度不同）造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂，錯位，顯示不出。

三.常見的瀏覽器安全色性問題及解決方案

1.不同瀏覽器標籤預設的外邊距和內邊距不同（這是最常見也是最容易解決的）。

問題狀況：隨便寫幾個標籤，在不加樣式控制的情況下，不同瀏覽器的margin和padding的差異較大。

解決方案：在css裡使用：*{margin:0px; padding:0px}。

2.塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大。

問題狀況：後面的塊屬性標籤被頂到下一行。

解決方案：在float的標籤樣式中加入:display:inline;將其轉化為行內屬性。

3.設定較小高度標籤（一般小於10px），在IE6、IE7，遨遊中高度超出自己設定的高度。

問題狀況：IE6、7和遨遊裡這個表情的高度不熟控制，超出自己設定的高度。

解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height小於你設定的高度。

4.行內屬性標籤，設定display:block後採用float布局，又有橫行的margin的情況，IE6間距bug。

問題狀況：IE6裡間距比超過設定的間距。

解決方案：在display:block;後面加入display:inline;display:table;

5.圖片預設有間距。

問題狀況：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。

解決方案：使用float為img布局。

6.標籤最低高度設定min-height步相容。

問題狀況：因為min-height本身就是一個不相容的css屬性，所以設定min-height時不能很好的被給瀏覽器安全色。

解決方案：如果我們要設定一個標籤的最小高度為200px，需要進行的設定為：{min-height:200px; height:auto; !important; height:200px; overflow:visible;}。

7.透明度的相容css設定。

做相容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否相容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的，只要我們稍加設定都能輕鬆地解決這些相容問題。如果我們熟悉標籤的預設屬性的話，就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。

1. /* CSS hack*/ 

我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的代碼IE不相容，然後用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是底線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

比如這樣一個CSS設定：

1. height:300px;*height:200px;_height:100px; 

IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相衝突設定，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設定，把高度設定為100px；

IE7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先順序相同且想衝突的屬性設定後一個會覆蓋掉前一個，所以書寫的次序是很重要的。