CSS兼容問題大全

一、chorme 最小字體的兼容性。

問題描述：ff和IE最小字體可設置爲1px，但是chorme中文版最小字體是12px，小於12px的字體所有顯示爲12px.
解決方案：chorme支持CSS3的，可用
font-size : 12px;
-webkit-transform : scale(0.84,0.84) ;
*font-size:10px;
來解決，可是會發現整個容器都縮小了，變得不對齊了，再配合margin可解決

二、IE8及如下顯示圖片時多出一個邊框而Chrome或Firefox下卻沒有
問題描述：顯示效果就是Chrome、FireFox、IE10以上都沒有問題，可是IE8就多出了一個藍色邊框（有時爲黑色的）。
解決辦法：須要指定img的邊框樣式便可： img{border-style:none;}

三、img圖片下的莫名留白問題
問題描述：圖片底部的空隙實際上涉及行內元素的佈局模型，圖片默認的垂直對齊方式是基線，而基線的位置是與字體相關的。因此在某些時候，圖片底部的空隙多是 2px，而有時多是 4px 或更多。不一樣的 font-size 應該也會影響到這個空隙的大小。
解決方法：給img設定 display:block或者vertical-align:top或bottom。

三、IE8下圖片透明兼容寫法：
問題描述：opacity時=是CSS3屬性，ie8不支持
解決辦法：opacity:0.7;
filter:alpha(opacity=70); /*兼容ie*/

四、IE六、7下不識別display:inline-block
解決方法以下：
讓標準瀏覽器識別display:inline-block;
讓ie6/7識別display:inline;來覆蓋上面的display:inline-block;而後經過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素同樣。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1;(觸發ie6和ie7下的haslayout);
*display:inline(只有ie6和ie7識別);
注：必定要加在display:inline-block;後面。

五、IE6 雙邊距bug。
問題描述：ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。
解決方案：給浮動容器定義display:inline。

六、IE6下兩個層中間有間隙
產生條件：當一個與浮動元素相鄰的非浮動元素並無指定具體的高度或寬度時，非浮動元素中的內容會和浮動元素的邊界產生3px的空隙。這個空隙只沿着非浮動元素顯示。若是非浮動的元素指定了一個具體的寬度或高度，這個時候非浮動元素和浮動元素出現了3px的空隙。
解決辦法：第一個浮動元素設置margin-right:-3px;

七、IE6下當多個浮動元素中間夾雜着HTML註釋語句時，若是浮動元素寬度爲100%，則在下一行多顯示一個上一行最後一個字符。
解決辦法：給全部浮動元素添加display:inline;。

八、IE6沒法定義1px左右高度的容器
IE6下這個問題是由於默認的行高形成的
解決方法: overflow:hidden;或 zoom:0.08;

九、a連接的hover狀態不起做用。
問題描述：a:hover img{width:300px} 咱們想讓鼠標hover時，連接裏包含的圖片寬度變化，這樣的樣式ie6是不認的，在ie七、ff下才有效果。

十、a連接不起做用
問題描述：a連接內嵌button或者input type="button"按鈕，ie8及如下點擊無反應 ff chorme 正常
解決方法：給按鈕添加onclick="javascript:location.href='***.html'"。這樣操做a連接無心義

十一、block化的a連接不起做用
問題描述：block化的a連接，其內套absolute層，absolute層內放置img，ie7如下鼠標點擊img不會有連接效果，ff chorme下正常。

十二、overflow:hidden對其下的絕對層position:absolute無效，absolute脫離文檔流。
解決方案：給overflow:hidden加position:relative或者position:absolute。

1三、IE中設置滾動條顏色，在FF chorme中無效
html {
scrollbar-face-color:red;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:blue;
scrollbar-3dlight-color:blue;
scrollbar-arrow-color:green;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:red;
}

1四、清除浮動的幾種方式：
1.添加空元素且設置clear:both;缺點：這個方式添加了添加了無心義的標記
2.對父元素也進行浮動。缺點：與父元素同級的元素會受到影響。
3.爲父元素設置overflow:hidden; 缺點：這會自動清理包含的任何浮動元素：
4.結合使用:after僞類和內容聲明在指定的現有內容的末尾添加新的內容：
對父元素添加clear類
.clear:after {
content:".";
　 height:0;
　 visibility:hidden;
display:block;
　 clear:both;
}
缺點：在IE6/7和更低版本中不起做用。
解決方法：
.clear {
zoom:1;
}

1五、ff不識別background-position-y 或background-position-x;
解決辦法：background-position:x y;兩個都寫；

5 //Ie6下，不識別最大寬高度和最小寬高度，意即min-width/height和 Max-width/height
解決方法：
(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}
（由於ie6有一個特徵，當定義一個高度時，若是內容超太高度，元素會自動調整高度。）

15 //ie6 不支持 fixed

/*對於非IE6能夠這樣寫*/
#top{
position:fixed;
bottom:0;
right:20px;
}

/*可是IE6是不支持fixed定位的，須要另外重寫*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*使用hack使IE6實現該效果，但這個東東會閃爍，須要如下代碼*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

/*使固定在頂部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}

17//ie6下z-index不起做用的 bug

1）首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有兩個：
一、父標籤position屬性爲relative；二、問題標籤含有浮動(float)屬性。
2）全部瀏覽器：父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

11.//高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p對象中的內容</p> </div>
解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。

11.//爲何FF下文本沒法撐開容器的高度 標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義: { height:auto!important; height:200px; min-height:200px; }

CSS hack
css hack是指一種兼容css在不一樣瀏覽器中正確顯示的技巧方法
IE各個版本hack

* 可被IE六、IE7識別 IE8/九、ff不能識別
_ 只能被IE6識別
*+ 只能被IE7識別 /*測試下IE67都識別*/
\0 可被IE八、九、10識別
\9 只能被IE六、七、八、九、10識別
\9\0 能被IE八、九、10識別

.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE六、IE7共用*/
.header {width:100px\0;} /* IE八、IE9共用*/
.header {width:100px\9;} /* IE6/7/8/9共用*/
.header {width:330px\9\0;} /* IE9專用*/

/*選擇器Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/

一、！important
IE789/firefox能夠識別!important,看到此語句後就不會在執行第二句
IE6會跳過!important語句（不識別）直接執行第二句
這是一個誤區
你們注意一下，IE6只是在某些狀況下不識別
例：div{background:red!important} div{background:green}，這時全部瀏覽器統一解釋爲背景色red。

三、//IE專用的條件註釋
<!--其餘瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 適合於IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Firefox 與 Chrome 的 Hack
Firefox:@-moz-document url-prefix() /*寫在選擇器外層時（只可寫在此處）：Firefox only*/
Chorme:@media screen and (-webkit-min-device-pixel-ratio:0) /*寫在選擇器外層時（只可寫在此處）：Chrome only*/

before/after僞類IE67不識別
.example:before, .example before {}
.example:after, .example after {}
一個有冒號，一個是空格分隔。前者IE8+及其餘現代瀏覽器；後者爲IE6-7準備的。

 

後期繼續補充及改善