前端解決不同瀏覽器及不同版本的兼容性問題
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin和padding差異較大。
解決方案：CSS里*{margin:0; padding:0;}
備注:這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0；
瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀：常見症狀是IE6中后面的一塊被頂到下一行
解決方案：在float的標簽樣式控制中加入display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用divfloat實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽(一般小於10px）,在IE6，IE7，高度超出自己設置的高度
問題症狀：IE6，7和遨游里這個標簽的高度不受控制，超出自己設置的高度。
解決方案：給超出高度的標簽設置overflow：hidden；或者設置行高line-height小於你自己設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display：block后采用float布局，又有橫行的margin的情況，IE6間距BUG
問題症狀：IE6里的間距比超過設置的間距
解決方案:在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊）。再用float布局並有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的BUG。不過因為它本身家就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:table
瀏覽器兼容問題五:圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會默認的間距，加了問題一中提到的通配符也不起作用。
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正確的（ps：不建議使用負margin,雖然能解決，但是負margin本身就是容易引起瀏覽器兼容問題的用法，所以禁止使用）。
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題症狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
解決方案:如果我們要設置一個標簽的最小高度200px，需要進行的設置為{min-height:200px;height:auto!important;height:200px;overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七：各種特殊樣式的兼容，比如透明度、圓角、陰影等。特殊樣式每個瀏覽器的代碼區別很大，所以，只能現查資料通過給不同瀏覽器寫不同的代碼來解決。
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什么會出現兼容問題以及怎么去解決這些兼容問題。
瀏覽器兼容性問題八:字體大小定義不同
問題症狀：對字體大小small定義不同，Firefox為13px，而IE為16px，差別比較大
解決方法：使用指定的字體大小如14px或者使用em
瀏覽器兼容性問題九：光標手形
問題表現：firefox不支持hand，但ie支持pointer
解決方案：統一使用cursor:pointer;
IE中的事件對象
window.event
和dom中的事件對象做對比：
幾個重要的方法和屬性分別是：
（1）事件類型：同為type屬性；
（2）事件作用目標：ie為srcElement屬性；
（3）阻止事件冒泡：ie為canceBubble屬性；（設置為ture為阻止冒泡，false為允許）；
（4）阻止事件默認行為：ie為retureValue屬性；（設置為ture為阻止，false是允許）；
同樣通過判斷瀏覽器的能力來選擇使用哪一個事件對象；
event對象在ie中和其他瀏覽器也不同：
在ie中直接用window.event;
其他瀏覽器中必須通過參數把event傳過來。
FF沒有window.event對象。可以通過給函數的參數傳遞event對象。
event代表事件的狀態，例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等。
***event對象只在事件發生的過程中才有效。
event的某些屬性只對特定的事件有意義。比如，fromElement 和 toElement 屬性只對 onmouseover 和 onmouseout 事件有意義。
***firefox里的event跟IE里的不同，IE里的是全局變量，隨時可用；firefox里的要用參數引導才能用，是運行時的臨時變量。//event在ff中是臨時變量，這表示可以換成任何其他符號
在IE中可以運行，因為在函數中會有一個內置的event隱藏對象。
但是在Firefox中,則內置event變量為空
[javascript] view plain copy
<input type="button" onmousemove="showDiv(event);"//event不需要加引號
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}
setAttribute('style','color:red;')
FIREFOX支持(除了IE，現在所有瀏覽器都支持)，IE不支持
解決辦法：不用setAttribute('style','color:red')
而用object.style.cssText = ‘color:red;'(這寫法也有例外)
最好的辦法是上面種方法都用上，萬無一失
類名設置
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定屬性名為class，IE不會設置元素的class屬性，相反只使用setAttribute時IE自動識CLASSNAME屬性)
解決辦法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或者直接 object.className='styleClass';
IE和FF都支持object.className。
建立單選鈕
IE以外的瀏覽器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
解決辦法：
這一點區別和前面的都不一樣。這次完全不同，所以找不到共同的辦法來解決，那么只有IF-ELSE了
萬幸的是，IE可以識別出document的uniqueID屬性，別的瀏覽器都不可以識別出這一屬性。問題解決。