網站開發中也會碰到各種各樣的相容性問題特別讓人頭疼，我根據自己的經驗，和一些網上的資料，總結了下面這些，還有很多別的相容性問題，日後持續更新（ps:部分語言表達的可能不太好或者錯誤的，歡迎指出錯誤，我也會持續更正）。

1. IE6不支援png-24透明圖片，問題出現的瀏覽器：IE6及其更低的版本

問題描述：在IE6瀏覽器上，使用png24為的圖片不透明，出現背景。

解決方法：圖片使用gif格式，或者png-8格式圖片。

2. 3畫素問題，問題出現的瀏覽器：IE6及其更低的版本

問題描述：兩個相鄰的div之間有3個畫素的空隙，一個div使用了float,而另一個沒有使用產生的。

解決方法：對另一個div也使用float;

給浮動的div新增屬性margin-right:-3px,但是這樣寫，在其他瀏覽器又會不正常，所以我們需要新增IE6的hack，在屬性margin-right前新增下劃線  _margin-right:-3px.(IE6以及更低版本的hack，是在屬性前面新增下劃線 _ )

3. 瀏覽器預設的margin和padding不同，

解決方案是加一個全域性的*{margin:0;padding:0;}來統一。

補充：關於這個問題，回答的不是太全面，我再網上看的視訊和一些別人的解決方法對於清除瀏覽器預設的標籤樣式的時候

主要有兩種：

1.css resert在網上搜索這個，拷貝這個重置程式碼，缺點是所有的樣式都被統一了，例如h1,h2,h3都被統一字型了，font-size都成了100%，就是下面這段程式碼（我從https://meyerweb.com/eric/tools/css/reset/這裡拷貝過來了，如下）。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 

2.在網上搜索 normalize css,可以使用npm install,或者在http://www.bootcdn.cn/這個網址裡面搜尋normalize css，然後直接引入既可使用。

(我比較喜歡這個清除預設樣式的方法)

4. IE5-IE8不支援opacity

問題出現的瀏覽器：IE8及其更低的版本

問題描述：IE5-IE8不支援css屬性opacity

解決方法：這時可以另外新增ie濾鏡alpha,如下：

Opacity:0.8;

Filter:alpha(opacity=80);

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;

5. IE6不能定義1px左右寬度的容器

問題出現的瀏覽器：IE6及其更低的版本

問題描述：建立一個高度為1px的容器，在IE6中沒效果。

解決方法：因為行高line-height在IE6下有預設值，設定 line-height:1px|overflow:hidden|zoom:0.08.

6. IE6不支援min-*:，問題出現的瀏覽器：IE6及其更低的版本

問題描述：IE6不支援min-height屬性。即使定義了元素高度，如果內容超過元素的高度，IE6在解析時，會自動延長元素的高度。

解決方法：利用IE6不識別！Important，給元素設定固定高度，並且設定元素高度自動。

Height : auto  ! important;

Height:300px;

Min_height:300px;

因為IE6不識別!Important，它只識別到了height:300px,當內容超過300px時,它會自動延長高度。IE7以及其他瀏覽器都識別！Important，雖然定義了Height:300px,但是！Important的優先級別最高。所以內容超過300px時，還是會自動延長。

7. 雙外邊距浮動問題：IE6及其更低的版本。

問題描述：塊屬性標籤float後，又有橫行的margin情況下，在IE 6顯示margin 比設定的大。

任何浮動的元素上的外邊距加倍，例如：如果元素設定的外邊距為maigin-left:15px, 在瀏覽器裡會顯示為margin-left:30px.

解決辦法：將元素的display屬性設定為inline，因為元素是浮動的，所以這麼設定

不會影響元素在瀏覽器的顯示。塊級元素就加display：inline；行內元   素轉塊級元素display：inline後面再加display：table。

          .bb{

           background-color:#f1ee18;        /*所有識別*/

          .background-color:#00deff\9;      /*IE6、7、8識別*/

          +background-color:#a200ff;        /*IE6、7識別*/

          _background-color:#1e0bd1;        /*IE6識別*/

          }

8. Firefox點選連結出現的虛線框：Firfox瀏覽器

問題描述：Firefox瀏覽器在點選連結時，會自動在元素周圍新增一個虛線邊框。

解決方法：我們為了和其他瀏覽器保持一致，需要去掉虛線框，我們可以給a標籤設 置outline屬性，如下：

a{outline:none;}

a:focus{outline:none;}