1.<!DOCTYPE HTML>文檔類型的聲明。
產生條件：IE6瀏覽器，當咱們沒有書寫這個文檔聲明的時候，會觸發IE6瀏覽器的怪異解析現象；
解決辦法：書寫文檔聲明。
2.不一樣瀏覽器當中，不少的標籤的默認樣式不一樣，如默認的外部丁內補丁。
產生條件：不一樣瀏覽器；
解決辦法：利用CSS reset文件進行樣式的清除，而後再根據須要進行設置。
3.橫向雙倍外邊距
產生條件：在IE6中塊元素浮動後，會出現橫向雙倍margin現象。
解決辦法： 在float標籤的樣式控制中加入display：inline
4.默認行高
產生條件：IE六、IE七、遨遊瀏覽器；設置的文字高度超出盒模型內容區域設置的高度時會影響佈局。
解決辦法：給超出高度的標籤設置overflow：hidden；或者將文字的行高line-height設置爲小於塊的高度。
5.img外部的border
產生條件：img外部有a標籤，即img標籤有連接時
解決辦法：設置img邊框border:0;
6.圖片默認有間距。
產生條件：img標籤（每一個img以後敲了回車）
解決辦法：爲img設置float的浮動佈局方式。
7.經典3像素bug
產生條件：IE6瀏覽器，浮動塊元素與未浮動塊元素處於同一行，有默認的3px間距。
解決辦法：設置非浮動元素浮動。
8.默認行高
產生條件：清除浮動的時候，有些人會採起一種清浮動的方法，使用一個空的div，而後爲這個div設置{clear：both}。在大部分
瀏覽器當中，這樣作是沒有任何問題的，可是在IE6瀏覽器當中，div即便是空的，也會存在默認行高。
解決辦法：設置其高度爲0，並設置overflow:hidden。{height:0;overflow:hidden;clear:both;}
9.a標籤hover不適用於全部標籤
產生條件：IE6瀏覽器中hover只支持a標籤的使用，不支持一切其它標籤使用；
解決辦法：合理用a標籤嵌套其餘行內標籤或者用javascript模擬a的hover效果；詳情請查看日誌：兼容IE6 a標籤hover效果
10.table標籤當中border-color屬性設置無效
產生條件：IE6中table設置屬性border-color無效；
解決辦法：運用CSS樣式進行控制，而不是使用屬性進行樣式的處理。
11.png格式圖片
產生條件：IE6瀏覽器，不支持透明；
解決辦法：使用javascript進行處理；或者使用gif、jpg圖像替代掉png圖片的使用。
12.透明rgba與opacity
產生條件：IE6不支持此兩種透明的設置方法；
解決辦法：使用IE6當中的濾鏡filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
13.子選擇器在IE6中不能使用
產生條件：IE6瀏覽器，使用E>F子選擇器；
解決辦法：採用其餘選擇器或者採用後代選擇器進行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
14.不支持最大最小寬高
產生條件：IE6瀏覽器，標籤的最低高度/寬度設置（min/max-height）
解決辦法：爲IE6單獨設置hack，即_height:最小高度值；_width：最小寬度值（對於IE6，當實際寬高超出定義的寬高時，元素會自動調整寬高）。對於最大高度和最大寬度，沒有必要設置兼容，當前對於開發者來講，只須要保證IE6下正常顯示便可，無需在它身上花費太多功夫。
15.縱向居中，IE6不支持display:table-cell
產生條件：IE6瀏覽器，設置一個元素在另外一個元素中垂直方向上居中對齊，不可以支持以單元格的方式來顯示元素；
解決辦法：若是是單行文本，採用line-height和height的配合使得文本垂直居中，若是中間是其餘元素或者多行文本，採用其餘方法進行居中處理，處理方法有多種，詳見日誌：CSS元素水平垂直居中。
16.input 聚焦框顏色與樣式不一樣
產生條件：各個瀏覽器表現不一樣；
處理方法：使用outline:none，清除默認樣式以後再統一設置。
17.鼠標移上小手效果
產生條件：IE6，cursor:hand ：IE徹底支持。可是在firefox是不支持的，沒有效果。cursor:pointer ：是CSS2.0的標準。因此firefox是支持的，可是IE5.0既以前版本不支持。IE6開始支持。；
解決辦法：設置兩種cursor:pointer ; cursor:hand。
18.子標籤沒法撐開父標籤的高度
產生條件：父標籤內部含一個或多個子標籤，父標籤沒有設置浮動，而子標籤發生浮動；
處理方法：方法1：在子標籤最後添加清除浮動的設置<div style='height:0;clear:both'></div>;方法2：爲父標籤添加{overflow:hidden;}的樣式；方法3：爲父標籤設置固定高度。
20.行內元素佈局混亂
產生條件：行內元素爲包含框時，若是包含框包含的絕對定位元素以百分比爲單位進行定位；
處理方法：在行內元素當中加入{zoom:1}，觸發IE的hasLayout。關於hasLayout的更多介紹請參見日誌：hasLayout IE瀏覽器bug的來源。
21.多顯示一個字
產生條件：多個浮動元素中間夾雜HTML註釋語句，浮動元素寬度設置爲100%；則在下一行多顯示一個上一行的最後一個字符；
處理方法：果斷刪掉註釋！
22.CSS優先級 ！important
產生條件：IE6當中，在同一組CSS屬性中，!important不起做用；
處理方法：單獨設置。
23.img圖片下部高度多餘5px
產生條件：IE6瀏覽器；
處理方法：將圖片轉化爲塊級對象，即display:block。還有四種其餘方法，詳細解釋參見日誌：「IE6 BUG 圖片元素img下 高度超出 出現多餘空白」
常見兼容性問題？
* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.javascript
* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。css
* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。 html
* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）html5
#box{ float:left; width:10px; margin:0 0 0 100px;} java
這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)web
* 漸進識別的方式，從整體中逐漸排除局部。 數組
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 瀏覽器
接着，再次使用「+」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。websocket
csssession
.bb{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
也可使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一經過getAttribute()獲取自定義屬性.
* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.
* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
* ie6對png圖片格式支持很差(引用一段腳本處理)
###解釋下浮動和它的工做原理？清除浮動的技巧
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；
###浮動元素引發的問題和解決辦法？
浮動元素引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構
解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2，使用after僞類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動外部元素
4,設置`overflow`爲`hidden`或者auto
###IE 8如下版本的瀏覽器中的盒模型有什麼不一樣
IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
###DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。
（1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() //經過元素Id，惟一性
###html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
* 拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
* 移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素