CSS相容問題大全，css相容大全

CSS相容問題大全，css相容大全

1、chorme 最小字型的相容性。

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

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

3、img圖片下的莫名留白問題
問題描述：圖片底部的空隙實際上涉及行內元素的布局模型，圖片預設的垂直對齊是基準，而基準的位置是與字型相關的。所以在某些時候，圖片底部的空隙可能是 2px，而有時可能是 4px 或更多。不同的 font-size 應該也會影響到這個空隙的大小。
解決方案：給img設定 display:block或者vertical-align:top或bottom。

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

4、IE6、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;後面。

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

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

7、IE6下當多個浮動元素中間夾雜著HTML備註陳述式時，如果浮動元素寬度為100%，則在下一行多顯示一個上一行最後一個字元。
解決辦法：給所有浮動元素添加display:inline;。

8、IE6無法定義1px左右高度的容器
IE6下這個問題是因為預設的行高造成的
解決方案: overflow:hidden;或 zoom:0.08;

9、a連結的hover狀態不起作用。
問題描述：a:hover img{width:300px} 我們想讓滑鼠hover時，連結裡包含的圖片寬度變化，這樣的樣式ie6是不認的，在ie7、ff下才有效果。

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

11、block化的a連結不起作用
問題描述：block化的a連結，其內套absolute層，absolute層內放置img，ie7以下滑鼠點擊img不會有連結效果，ff chorme下正常。

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

13、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;
}

14、清除浮動的幾種方式：
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;
}

15、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無論設定多高都不起作用情況。這種情況發生的條件有兩個：
1、父標籤position屬性為relative；2、問題標籤含有浮動(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

* 可被IE6、IE7識別 IE8/9、ff不能識別
_ 只能被IE6識別
*+ 只能被IE7識別 /*測試下IE67都識別*/
\0 可被IE8、9、10識別
\9 只能被IE6、7、8、9、10識別
\9\0 能被IE8、9、10識別

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

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

1、！important
IE789/firefox可以識別!important,看到此語句後就不會在執行第二句
IE6會跳過!important語句（不識別）直接執行第二句
這是一個誤區
大家注意一下，IE6隻是在某些情況下不識別
例：div{background:red!important} div{background:green}，這時所有瀏覽器統一解釋為背景色red。

3、//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準備的。

 

後期繼續補充及改善