一琅轧，從根源上講
????????各個瀏覽器之所以存在兼容性的問題，究其原因是不同瀏覽器的內(nèi)核也不盡相同，所以各個瀏覽器對網(wǎng)頁的解析存在一定的差異胡桃。內(nèi)核是瀏覽器底層架構最核心和基礎的部分，按照功能可分為：渲染引擎和JS引擎谤饭。渲染引擎（Rendering Engine）也稱為布局引擎（Layout Engine）标捺、排版引擎，負責對網(wǎng)頁語法的解釋和渲染顯示到瀏覽器揉抵。一個渲染引擎通常包括HTML解釋器亡容、CSS解釋器、布局layout冤今、網(wǎng)絡等模塊:
????????通常講的瀏覽器內(nèi)核就是指代的瀏覽器的渲染引擎闺兢。不同的瀏覽器使用不同的渲染內(nèi)核，對HTML/JS/CSS的標準語法的解釋也存在差異戏罢，導致在顯示效果屋谭、語法支持度和渲染效率上也存在差別，所以也就導致了網(wǎng)頁程序在不同內(nèi)核的瀏覽器下的表現(xiàn)和渲染差異龟糕，乃至bug都不統(tǒng)一桐磁。
二，常見的HTML和CSS中的兼容性問題
1.雙邊距BUG float引起的? 使用display
浮動元素的雙倍Margin的Bug是IE6以及其以下版本的一個經(jīng)典Bug了讲岁，觸發(fā)這個Bug的產(chǎn)生是給元素設置了float并且同時和float同一方向設置了margin值我擂，此時在IE6(IE6以下版本我們飄過不理了)就會產(chǎn)一個雙倍margin值的Bug。
修復這個Bug的方法很簡單缓艳，只需要改變浮動元素的顯示風格校摩，也就是說在浮動元素中增加一個“display:inline”屬性，這樣就可以輕松的解決“浮動元素的雙倍Margin”的Bug阶淘。
2.hover失效
????????超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
? L-V-H-A :? a:link {} a:visited {} a:hover {} a:active {}
3.圖片間隙
????????div中的圖片間隙(該bug出現(xiàn)在IE6及更低版本中)
????????描述：在div中插入圖片時衙吩，圖片會將div下方撐大三像素。
????????hack1:將<div>與<img>寫在一行上溪窒；
????????hack2:將<img>轉(zhuǎn)為塊狀元素坤塞，給<img>添加聲明：display:block;
4.透明屬性
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍1--100
兼容其他瀏覽器寫法：opacity:.value;(value的取值范圍0-9)
5：min-height在IE6下不兼容
解決方案：
1）min-height：value冯勉；
? ? ? _height：value；
2）min-height：value尺锚；
? ? ?height：auto珠闰！important；
? ? ?height：value瘫辩；
6：按鈕默認大小不一
解決方案：
1）用a標簽來模擬按鈕伏嗜，添加樣式；
2）如果按鈕是一張背景圖片伐厌，那么直接給按鈕添加背景圖承绸；
7:上下margin的重疊問題
描述：給上邊元素設置了margin-bottom，給下邊元素設置了margin-top挣轨，瀏覽器只會識別較大值军熏；
解決方案：margin-top和margin-bottom中選擇一個，只設置其中一個值卷扮；
8:hack
Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法荡澎，因為它們都屬于個人對CSS代碼的非官方的修改，或非官方的補丁晤锹。有些人更喜歡使用patch(補丁)來描述這種行為摩幔。
在屬性前可加以上這三個符號
_ 只有IE6以下及IE6支持,例如_height:100px;
* 只有IE7以下及IE7支持,例如*height:100px;
*+只有IE7以下及IE7支持,例如*+height:100px;
針對IE8以及以上加屬性值后綴\0（數(shù)字零）,例如：height:200px\0;
9：Filter
表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規(guī)則或聲明的方法鞭铆。本質(zhì)上講或衡，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型疗琉。
三 常見的JavaScript的兼容性問題
1.標準的事件綁定方法函數(shù)為addEventListener薄嫡，但IE下是attachEvent；
2.事件的捕獲方式不一致爹脾，標準瀏覽器是由外至內(nèi)舶担，而IE是由內(nèi)到外坡疼，但是最后的結果是將IE的標準定為標準
3.window.event獲取的。并且獲取目標元素的方法也不同衣陶，標準瀏覽器是event.target回梧，而IE下是event.srcElement
4.ajax的實現(xiàn)方式不同，這個我所理解的是獲取XMLHttpRequest的不同祖搓，IE下是activeXObject
5.獲得DOM節(jié)點的父節(jié)點、子節(jié)點的方式不同
其他瀏覽器：parentNode??parentNode.childNodes???????
IE：parentElement?parentElement.children
