標籤：解析 http 空白 active 簡單介紹 ext 建議 cape ant
瀏覽器安全色
為什麼會有相容問題？
由於市場上瀏覽器種類眾多，而不同瀏覽器其核心亦不盡相同，所以各個瀏覽器對網頁的解析就有一定出入，這也是導致瀏覽器安全色問題出現的主要原因，我們的網頁需要在主流瀏覽器上正常運行，就需要做好瀏覽器安全色。現在市面上使用較多的核心例如：
使用Trident核心的瀏覽器：IE、Maxthon、TT；
使用Gecko核心的瀏覽器：Netcape6及以上版本、FireFox；
使用Presto核心的瀏覽器：Opera7及以上版本；
使用Webkit核心的瀏覽器：Safari、Chrome。
主要的相容問題也是出在IE瀏覽器和其它流行的瀏覽器之間的問題，對於IE瀏覽器本身而已，每個版本跨度都有差別，IE8以上和IE8以下都存在很多相容的問題。
在前端的工作中解決瀏覽器安全色問題是我們必須掌握的一項技能。
對瀏覽器安全色問題，可以總結為HTML，Javascript相容，CSS相容。 其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標籤，低版本瀏覽器有點影響時代進步啊。
css是一個痛點，css相容問題是主要的瀏覽器安全色問題，解決css相容問題是至關重要的。
這裡就簡單介紹一些css相容問題和解決方案。
1.css hake技術，對相容問題瞭解不深時，常常採用的方法。
1、區別IE6,IE7,IE8,FF
【區別符號】：「\9」、「*」、「_」
2、區別IE6、IE7、Firefox(方法1)
【區別符號】：「*」、「_」
3、區別IE6、IE7、Firefox(方法2)
【區別符號】：「*」、「!important」
4、區別IE6、IE7(方法1)
【區別符號】：「*」、「_」
5、區別IE6、IE7(方法2)
【區別符號】：「!important」
2.條件注釋法
<!--[if lte IE 6]> 這段文字僅顯示在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 這段文字僅顯示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 這段文字僅顯示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 這段文字僅顯示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中載入css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
3.一些常見的相容性問題bug
1、IE6怪異解析之padding與border算入寬高
原因：未加文檔聲明造成非盒模型解析
解決方案：加入文檔聲明<!doctype html>
2、IE6在塊元素、左右浮動、設定marin時造成margin雙倍（雙邊距）
解決方案：display:inline
3、以下三種其實是同一種bug，其實也不算是個bug，舉個例子：父標籤高度20，子標籤11，垂直置中，20-11=9，9要分給文字的上面與下面，怎麼分？IE6就會與其它的不同，所以，盡量避免。
1）字型大小為奇數之邊框高度少1px
解決方案：字型大小設定為偶數或line-height為偶數
2）line-height，文本垂直置中差1px
解決方案：padding-top代替line-height置中，或line-height加1或減1
3）與父標籤的寬度的奇偶不同的置中造成1px的偏離
解決方案：如果父標籤是奇數寬度，則子標籤也用奇數寬度;如果是父標籤偶數寬度，則子標籤也用偶數寬度
4、內部盒模型超出父級時，父級被撐大
解決方案：父標籤使用overflow:hidden
5、line-height預設行高bug
解決方案：line-height設值
6、列標籤之間會有一小段空白
解決方案：float或結構並排(可讀性差，不建議)
7、標籤高度無法小於19px
解決方案：overflow: hidden;
8、左浮元素margin-bottom失效
解決方案：顯示設定高度 or 父標籤設定_padding-bottom代替子標籤的margin-bottom or 再放個標籤讓父標籤浮動，子標籤
margin- bottom，即(margin-bottom與float不同時作用於一個標籤)
9、img於塊元素中，底邊多出空白
解決方案：父級設定overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
10、li之間會有間距
解決方案：float: left;
11、塊元素中有文字及右浮動的行元素，行元素換行
解決方案：將行元素置於塊元素內的文字前
12、position下的left，bottom錯位
解決方案：為父級(relative層)設定寬高或添加*zoom:1
13、子級中有設定position，則父級overflow失效
解決方案：為父級設定position:relative
14、 IE6片下方有空隙產生；解決這個BUG的方法也有很多,可以是改變html的排版,或者設定img 為display:block，
或者設定vertical-align 屬性為vertical-align:top bottom middle text-bottom都可以解決.（但是最近我發現這個問題在其它瀏覽器中也有所體現）
15、IE6 3px bug 兩個浮動層中間有間隙，這個IE的3PX BUG也是經常出現的,
解決的辦法是給右邊元素也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
經典兩列布局，float: left;width:200px; 第二個，margin-left,200px; 他們之間會產生3px的間距。
16、 在IE6中沒有min-width的概念，其預設width就是min-width，所以有時字型過多它會選擇撐開容器。
17、 IE6無法定義1px左右高度的容器，是因為預設的行高造成的,解決的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器置中依然在IE6中行不通，我們要對其父容器使用
18、被點擊瀏覽過的超連結樣式不在具有hover和active了,很多人應該都遇到過這個問題, 解決方案是改變CSS屬性的排列順序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>
19、 在使用絕對位置/相對定位時，設定z-index在ie中可能會失效，是因為其元素依賴於其父元素的z-index，而父元素預設為0 ？所以子項目z-index高，而父元素底，依然不會改變其顯示順序；
文章來自http://www.cnblogs.com/hexi1/p/4580192.html
css中的一些相容問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
