CSS兼容性問題總結及解決方法

時間 2019-11-18

標籤 css 兼容性問題總結解決方法欄目 CSS 简体版

原文原文鏈接

css兼容問題css

兼容問題html

1.文字自己的大小不兼容。一樣是font-size:14px的宋體文字，在不一樣瀏覽器下佔的空間是不同的，ie下實際佔高16px，下留白3px，ff下實際佔高17px，上留白1px，下留白3px。解決方案：給文字設定 line-height 。確保全部文字都有默認的 line-height 值。java

2.ff下容器高度限定.即容器定義了height以後，容器邊框的外形就肯定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。因此不要輕易給容器定義height。css3

3. 橫向上的內容撐破容器問題。若是float 容器未定義寬度，ff下內容會盡量撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器須要定義width。web

4.浮動的清除，ff下必須清除浮動clear:both。express

5. double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。解決方案，給浮動容器定義display:inline。瀏覽器

6.margin bug.當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現相似問題，都是ie6下的特產，該類bug 出現的狀況較爲複雜，遠不僅這一種出現條件。解決方案：外層元素設定border 或設定float。佈局

7.吞吃現象.仍是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。ui

8.註釋也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案，ie6的這個bug 下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「<!–[if !IE]> picRotate start <![endif]–>」方法寫註釋。this

9.img下的留白，你們看這段代碼有啥問題：

把div的border打開，你發現圖片底部不是緊貼着容器底部的，是img後面的空白字符形成，給img設定 display:block能夠解決。

10去line-height。<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。解決方案：讓img 和文字都 float起來。

11消失的hover狀態。a:hover img{width:300px} 咱們想讓鼠標hover時，連接裏包含的圖片寬度變化，惋惜在ie6下無效，ie七、ff下有效。

12連接的hover狀態。div:hover{} 這樣的樣式ie6是不認的，在ie七、ff下才有效果。

13block化的a連接，其內套absolute層，absolute層內放置img，ie下，鼠標點擊img不會有連接效果，ff下正常。

14沒法完全清除的float。解決方案：給ul 屬性zoom:1 （給li 加zoom:1 沒用）

15ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie七、ff不支持。

16．e6下嚴重的bug，float元素如沒定義寬度，內部若有div定義了height或zoom:1，這個div就會佔滿一整行，即便你給了寬度。float元素若是做爲佈局用或複雜的容器，都要給個寬度的。

17．e6下的bug，絕對定位的div下包含相對定位的div，若是給內層相對定位的div高度height具體值，內層相對層將具備100%的width值，外層絕對層將被撐大。解決方案給內層相對層float屬性。

18．下的bug，<head></head>內有<base target=」_blank」/>的狀況下，position:relative層下的float層內文字沒法選中。這個bug迫使我修公用樣式庫。

19．f的缺點。width:100%在ie裏用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結束，如此，只能給中間的全部浮動層加width:100%才行，累啊。

20．iE6的問題。當層的高度小於20px時，IE6下要定義font-size：0px;不然高度爲20px;

21．ff下，只有body和html同時定義height:100%,高度才爲100%。IE下只須要定義body.

22．div的垂直居中問題:

vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行.

23． IE捉迷藏的問題

　　當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。

　　有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

24．麼web標準中IE沒法設置滾動條顏色了

　　解決辦法是將body換成html

25．連接(a標籤)的邊框與背景

　　a連接加邊框和背景色，需設置 display: block,

26..ul標籤在ff中默認是有padding值的,而在IE中只有margin有值因此先定義
ul{margin:0;padding:0;}
　　就能解決大部分問題

27.ff: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行

ff: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中

28.tu片居中，文字居左的寫法。

.abc{ text-align:left }

abc img{ display:block ; text-align:center;margin:o auto; }

29.層垂直居中的樣式：

div{

　　position:absolute;

　　top:50%;

　　left:50%;

　　margin:-117px 0 0 -187px;

　　width:374px;

　　height:234px;

　　background-image:url(images/beijing.jpg);

}

30.form在IE6裏面底下會多出來一行，加上style="padding:0; margin:0;">

32．空td顯示邊框 table { border-collapse:collapse; }

33.鼠標通過圖片變化圖片

function imagechange(img)

{

document.images[0].src=img;

document.images[0].width=400;

document.images[0].height=300;

}

</script>

</head>

<body>

</body>

34.表單輸入框默認文字的設置

function cleanUp(id){

if(document.getElementById("userid").value == "請輸入搜索關鍵字")

{

document.getElementById(id).value = "";

}

35.圖片透明兼容寫法：

filter:alpha(opacity=70);-moz-opacity:0.7;

36 文字和圖片在同一行垂直居中問題：

一個關鍵的屬性: margin-bottom 經過修改圖片的外邊框的底部高度就可讓文字移動上來. 作法是把這個值設置爲負數.例如咱們把下面的16X15的圖片設置它的style="margin-bottom:-3px" 這樣文字和圖片就居中了

兼容性一直都是個使人頭痛的問題，下面簡單總結火狐與IE的兼容性問題。

1. 超連接訪問事後hover樣式就不出現的問題
被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A

1. <style type="text/css">
2. 
8. </style>

2. FireFox下如何使連續長字段自動換行
衆所周知IE中直接使用 word-wrap:break-word 就能夠了, FF中咱們使用JS插入的方法來解決

1. <style type="text/css">
2. 
9. </style>
10.<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
11.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
12.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
13.aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Js代碼

1. <scrīpt type="text/javascrīpt">
2. /* <![CDATA[ */
3. function toBreakWord(el, intLen){
4. var ōbj=document.getElementById(el);
5. var strContent=obj.innerHTML;
6. var strTemp="";
7. while(strContent.length>intLen){
8. strTemp+=strContent.substr(0,intLen)+"
9. ";
10. strContent=strContent.substr(intLen,strContent.length);
11. }
12. strTemp+="
13."+strContent;
14. obj.innerHTML=strTemp;
15. }
16. if(document.getElementById && !document.all) toBreakWord("ff", 37);
17. /* ]]> */
18. </script>

3.ff下爲何父容器的高度不能自適應
在子容器加了浮動屬性後,該容器將不能自動撐開,解決方法是在標籤結束後加上一個清除浮動的元素。

1. clear:both;

4.IE6的雙倍邊距BUG
浮動後原本外邊距10px,但IE解釋爲20px,解決辦法是加上

1. display: inline

5. IE6下絕對定位的容器內文本沒法正常選擇
此問題在IE六、7中存在,解決問題的辦法是讓IE進入到qurks mode。關於qurks mode的相關知識,請參考:
http://www.microsoft.com/..

6. IE6下圖片下方有空隙產生
解決這個BUG的方法也有不少,能夠是改變html的排版,或者設置img 爲display:block
或者設置vertical-align 屬性爲vertical-align:top bottom middle text-bottom均可以解決.

7. IE6下兩個層中間有間隙
這個IE的3PX BUG也是常常出現的,解決的辦法是給.right也一樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

8. list-style-image沒法準肯定位
list-style-image的定位問題也是常常有人問的,解決的辦法通常是用li的背景模擬,這裏採用相對定位的方法也能夠解決。

9. LI中內容超過長度後以省略號顯示的方法
此方法適用與IE與OP瀏覽器

1. <style type="text/css">
2. <! --
3. li {
4. width: 200px;
5. white-space:nowrap;
6. text-overflow:ellipsis;
7. -o-text-overflow:ellipsis;
8. overflow: hidden;
9. }
10. -->
11.</style>

10.web標準中定義id與class有什麼區別嗎
一.web標準中是不允許重複ID的,好比 div id="aa" 不允許重複2次,而class 定義的是類,理論上能夠無限重複, 這樣須要屢次引用的定義即可以使用他.
二.屬性的優先級問題
ID 的優先級要高於class,看上面的例子
三.方便JS等客戶端腳本,若是在頁面中要對某個對象進行腳本操做,那麼能夠給他定義一個ID,不然只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

11.如何垂直居中文本
將元素高度和行高設爲一致。

1. <style type="text/css">
2. 
9. </style>

12.如何對齊文本與文本輸入框
加上 vertical-align:middle;

1. <style type="text/css">
2. 
10.</style>
11.

13.FF下面不能水平居中呢
FF下面設置容器的左右外補丁爲auto就能夠了

1. <style type="text/css">
2. 
7. </style>

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

1. {
2. height:auto!important;
3. height:200px;
4. min-height:200px;
5. }

15.IE6下容器的寬度和FF解釋不一樣呢

1. <?xml version="1.0" encoding="gb2312"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4. <style type="text/css">
5. 
13. </style>
14.<div ōnclick="alert(this.offsetWidth)">web標準常見問題大全</div>

問題的差異在於容器的總體寬度有沒有將邊框（border）的寬度算在其內,這裏IE6解釋爲200PX ,而FF則解釋爲220PX,那到底是怎麼致使的問題呢？你們把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode,關於qurks mode、standards mode的相關知識,請參考:
http://www.microsoft.com/..

16. 爲何web標準中IE沒法設置滾動條顏色了
解決辦法是將body換成html

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. 
15.</style>

17. 爲何我定義的樣式沒有做用呢
這裏你沒法用.aa定義到li 遇到這種狀況怎麼解決呢？答案是提升.aa 的優先權好比#aa ul li.aa

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. 
12.</style>
13.<div id="aa">
14.<ul>
15.<li class="aa">
16. web標準常見問題大全
17.</li>
18.</ul>
19.</div>

18. IE6沒法定義1px左右高度的容器
IE6下這個問題是由於默認的行高形成的,解決的方法也有不少,例如:

1. overflow:hidden zoom:0.08 line-height:1px

19. 背景顏色沒法顯示

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. 
13.</style>
14.
19.<ul class="gainlayout">
20.<li>web標準常見問題大全</li>
21.<li>web標準常見問題大全</li>
22.<li>web標準常見問題大全</li>
23.<li>web標準常見問題大全</li>
24.<li>web標準常見問題大全</li>
25.<div style="clear:both"></div>
26.</ul>

IE中設置有背景色的ul並無顯示出來,這個屬於haslayout問題,解決的辦法也不少參考 http://www.satzansatz.de/cssd/onhavinglayout.htm
解決方法之一:

1. 
6. 

20. 怎麼樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設置透明

1. <param name="wmode" value="transparent" />

21. 怎樣使一個層垂直居中於瀏覽器中
這裏咱們使用百分比絕對定位,與外補丁負值的方法,負值的大小爲其自身寬度高度除以二

1. <style type="text/css">
2. 
13.</style>

22. 圖片垂直與容器內

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <style type="text/css">
3. 
28.</style>
29.<div><p><img src="logo.gif" /></p></div>

或者使用背景圖的辦法:

1. background:url("logo.gif") center no-repeat;

23. 如何讓div橫向排列
橫向排列DIV可使用浮動的方式好比float:left,或者設置對象爲內聯,還能夠絕對定位對象等等.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. 
12.</style>
13.<div>web標準常見問題大全</div>
14.<div>web標準常見問題大全</div>
15.
16.
17.<div>web標準常見問題大全</div>

24 Firefox 關於DIV高度沒法自適應的兩種解決
若是設置了一個DIV的高度，當DIV裏實際內容大於所設高度，ie會自動拉伸以適應DIV容器大小，ff會固定DIV的高度，超過部分超出DIV底線之外，
出現和下面的內容重疊的現象。若是不給DIV設置高度，在Firefox中將不回由於裏面的內容而撐開，而IE中就會自動根據內容撐開
解決方案：
一、在DIV內部的最後追加clear:both樣式

1. <div style="background-color:#FF0000;">
2. <div style="float:left; height:200px">Jmedia Design</div>
3. <div style="float:right; height:800px">www.jmedia.cn</div>
4. <div style="clear:both"></div>
5. </div>

二、對DIV使用overflow:auto；

1. <div style="overflow:auto;">
2. <div style="float:left; background-color:#000000;height:200px">1111111111</div>
3. <div style="float:right;background-color:#000000; height:300px"">2222222222</div>
4. </div>

1 ie6.0橫向margin加倍

產生因素：塊屬性、float、有橫向margin。
解決方法：display：inline；
2 ie6.0下默認有行高

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；
3 在各個瀏覽器下img有空隙(緣由是：回車。)

解決方法:讓圖片浮動。
4 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。

解決方法：a 在子標籤最後清浮動{<div style="height:0;clear:both;"> </div>}
b 父標籤添加{overflow：hidden；}
c 給父標籤設置高度
5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，

解決方法：(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有一個特徵，當定義一個高度時，若是內容超太高度，元素會自動調整高度。）
6 Ie6裏面：如li設寬、高，而且li裏面的標籤浮動，那麼li之間會有間距

解決方法：li不設寬、高或者li內的標籤不浮動
7 li之間有間距

解決方法：li 設置vertical-align:middle;
8 3像素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三像素問題。

解決方法：用hack技術，例如：全部瀏覽器通用 height:100px;
ie6專用_height:100px;
ie7專用*+height:100px;
ie6/ie7共用*height:100px;
9 當定義行內元素爲包含框時，且包含框包含的絕對定位元素以百分比爲單位進行定位時，會出現混亂。

解決方法：在行內元素里加入{zoom：1；}
10 當多個浮動元素中間夾雜着HTML註釋語句時，若是浮動元素寬度爲100%，則在下一行多顯示一個上一行最後一個字符。

解決辦法：給浮動元素添加display:inline;。
11 opacity 定義元素的不透明度

filter：alpha（opacity=80）；/*ie支持該屬性*/
opacity：0.8；/*支持css3的瀏覽器*/
12 兩個塊元素，豎向的margin值不增長，會重疊，其間距爲最大margin值。

13 優先級：被!important 註明的css屬性具備最高優先級(.abc{color:red !important;})。但在ie6中!important具備一個bug:在同一組css屬性中，!important不起做用。

14 火狐不識別background-position-y 或background-position-x;

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));
}
複製代碼
16 解決 ie6 最大、最小寬高 hack方法

複製代碼
/* 最小寬度 */
.min_width{
min-width:300px;
_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大寬度 */
.max_width{
max-width:600px;
_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
min-height:200px;
_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
max-height:400px;
_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
複製代碼

17 z-index不起做用的 bug

1）ie6下首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有三個：一、父標籤position屬性爲relative；二、問題標籤含有浮動(float)屬性。
2）全部瀏覽器：它只認第一個爸爸
層級的高低不只要看本身，還要看本身的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

18 ie各個版本hack

/*類內部hack：*/
.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE六、IE7共用*/
.header {width:100px\0;} /* IE八、IE9共用*/
.header {width:100px\9;} /* IE六、IE七、IE八、IE9共用*/
.header {width:330px\9\0;} /* IE9專用*/

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。