瀏覽器兼容性大全_第1頁
瀏覽器兼容性大全_第2頁
瀏覽器兼容性大全_第3頁
瀏覽器兼容性大全_第4頁
瀏覽器兼容性大全_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、瀏覽器兼容性瀏覽器的內(nèi)核Mozilla Firefox ( Gecko )Internet Explorer ( Trident )Opera ( Presto )Safari ( WebKit )Google Chrome ( WebKit )騰訊TT、世界之窗、360瀏覽器、遨游瀏覽器都是給IE加了個(gè)外殼，不過如果電腦上裝的是ie8的話，這些瀏覽器還是調(diào)用ie7的內(nèi)核。搜狗瀏覽器比較特殊，它有兩種瀏覽模式：一是兼容模式，該模式使用IE內(nèi)核；二是高速模式，該模式使用WebKit內(nèi)核。解決ie7、ie8兼容性最好的辦法是在head標(biāo)簽中加入meta 類型<meta http-equiv=

2、"X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8一讀到這個(gè)標(biāo)簽,它就會(huì)自動(dòng)啟動(dòng)IE7兼容模式CSS Hack解決瀏覽器兼容性問題的主要方法是CSS hack。由于不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面

3、效果。這個(gè)針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。CSS Hack的原理是什么由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級(jí)的關(guān)系。我們就可以根據(jù)這個(gè)來針對不同的瀏覽器來寫不同的CSS。比如 IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線"_"，而firefox兩個(gè)都不能認(rèn)識(shí)。等等各瀏覽器CSS hack兼容表： IE6IE7IE8FirefoxOperaSafari!important&

4、#160;Y YY YY _Y     *YY    *+ Y    9YYY   0  Y   nth-of-type(1)    YY如何解決瀏覽器的兼容性在head標(biāo)簽中加入meta 類型<meta http-equiv="X-UA-Compatible" content=&q

5、uot;IE=EmulateIE7" />，這樣就解決了ie7、ie8兼容問題?，F(xiàn)在剩下ie6、ie7、Firefox、Chrome(Safari與Chrome使用同一內(nèi)核)、Opera這幾種瀏覽器的兼容性問題，我們需要使用CSS Hack來解決該問題。代碼如下所示：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><

6、;head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>瀏覽器兼容性問題</title><style type="text/css">.t1     &#

7、160; color:#000000; /* 所有瀏覽器都支持 此處填寫Firefox的css*/       *color:#0000FF; /* ie6 id7 支持 此處填寫ie7的css*/       _color:#66CCCC; /* ie6支持  此處填寫ie6的css*/media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixe

8、l-ratio:0) .t1color:#9900FF /* oprea支持  此處填寫oprea的css*/media screen and (-webkit-min-device-pixel-ratio:0).t1color:#336600/* Chrome、Safari支持  此處填寫Chrome的css*/</style></head><body><div class="t1">ff、ie8、ie7、ie6、oprea、Safari兼容性css 書寫模式<br>.t1 

9、0;     color:#000000; /* 所有瀏覽器都支持 此處填寫Firefox的css*/<br>       *color:#0000FF; /* ie6 id7 支持 此處填寫ie7的css*/<br>       _color:#66CCCC; /* ie6支持  此處填寫ie6的css*/<br><br>/* oprea支持此處填寫oprea的css*/<

10、;br>media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)<br> .t1color:#CC66FF<br>/* Chrome、Safari支持 此處填寫Chrome的css*/<br>media screen and (-webkit-min-device-pixel-ratio:0).t1color:#336600</div></div></body></ht

11、ml>常見的瀏覽器兼容問題Css樣式是與DOCTYPE引入的W3C/DTD有關(guān)的，不同的dtd對css的解析也不同，我們現(xiàn)在統(tǒng)一使用<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">css兼容問題： 1. 默認(rèn)的內(nèi)外邊距不同問題：各個(gè)瀏覽器默認(rèn)的內(nèi)外邊距不同解決：*margin:0;padding:0; 2. 水平居中的問題問題：設(shè)置

12、text-align: center   ie6-7文本居中，嵌套的塊元素也會(huì)居中ff /opera /safari /ie8文本會(huì)居中，嵌套塊不會(huì)居中解決：塊元素設(shè)置 1、margin-left:auto;margin-right:auto2、margin:0 auto;3、<div align=”center”></div>3. 垂直居中的問題問題：在瀏覽器中 想要垂直居中，設(shè)置vertical-align:middle; 不起作用。例如：ie6下文本與文本輸入框?qū)Σ积R，需設(shè)置vertical-align:middle1，但是文本框的內(nèi)容不會(huì)垂直

13、居中解決：給容器設(shè)置一個(gè)與其高度相同的行高line-height:與容器的height一樣4. 關(guān)于高度問題問題：如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。如果設(shè)定了高度，內(nèi)容過多時(shí)，ie6下會(huì)自動(dòng)增加高度、其他瀏覽器會(huì)超出邊框解決：1.設(shè)置overflow:hidden;2.高度自增height:auto!important;height:100px;   5. IE6 默認(rèn)的div高度問題：ie6默認(rèn)div高度為一個(gè)字體顯示的高度，所在ie6下div的高度大于等于一個(gè)字的高度，因此在ie6下定義高度為1px的容器，顯

14、示的是一個(gè)字體的高度解決：為這個(gè)容器設(shè)置下列屬性之一1、設(shè)置overflow:hidden;2、設(shè)置line-height:1px;3、設(shè)置zoom:0.08 6. IE6 最小高度(寬度)的問題問題：ie6不支持min-height、min-width屬性，默認(rèn)height是最小高度，width是最小寬度。解決：    使用ie6不支持但其余瀏覽器支持的屬性!important。設(shè)置屬性min-height:200px; height:auto !important; height:200px;   7. td高度的問題問題：tab

15、le中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度解決：       設(shè)置line-height和height一樣。在ie中如果td中的沒有內(nèi)容，那么border將不會(huì)顯示8. div嵌套p時(shí)，出現(xiàn)空白行問題：div中顯示<p>文本</p>，ff、oprea、Chrome：top和bottom都會(huì)出現(xiàn)空白行，但是在ie下不會(huì)出現(xiàn)空白行。解決：設(shè)置p的margin:0px，再設(shè)置div的padding-top和padding-bottom9. IE6-7圖片下面有

16、空隙的問題問題：塊元素中含有圖片時(shí)，ie6-7中會(huì)出現(xiàn)圖片下有空隙解決：  1、在源代碼中讓</div>和<img>在同一行2、將圖片轉(zhuǎn)換為塊級(jí)對象display:block;3、設(shè)置圖片的垂直對齊方式  vertical-align:top/middle/bottom4、改變父對象的屬性，如果父對象的寬、高固定，圖片大小隨父對象而定，那么可以對父元素設(shè)置： overflow:hidden; 5、設(shè)置圖片的浮動(dòng)屬性  float:left;10. IE6雙倍邊距的問題問題：ie6中設(shè)置浮動(dòng)，同時(shí)又設(shè)置margin時(shí)，會(huì)出現(xiàn)雙倍邊距的問題例f

17、loat:left;width:100px;margin:0 100px; 解決：       設(shè)置display:inline; 11. IE6 weidth為奇數(shù)，右邊多出1px的問題問題：父級(jí)元素采用相對定位，且寬度設(shè)置為奇數(shù)時(shí)，子元素采用絕對定位，在ie6中會(huì)出現(xiàn)右側(cè)多出1像素 解決：將寬度的奇數(shù)值改成偶數(shù) 12. IE6兩個(gè)層之間3px的問題問題：       左邊層采用浮動(dòng)，右邊沒有采用浮動(dòng)，這時(shí)在ie6中兩層之間就會(huì)產(chǎn)生3像素的間距解決：1、

18、右邊層也采用浮動(dòng)  float2、左邊層添加屬性  margin-right:-3px; 13. IE6 子元素絕對定位的問題問題：       父級(jí)元素使用padding后，子元素使用絕對定位，不能精確定位解決：       在子元素中設(shè)置  _left:-20px; _top:-1px; 14. 顯示手型cursor:hand問題：       ie6/7/8、o

19、pera       都支持  但是safari 、 ff 不支持解決：寫成 cursor:pointer;  (所有瀏覽器都能識(shí)別)    15. IE6-7 line-height失效的問題問題：       在ie中img與文字放一起時(shí)， line-height不起作用  解決：都設(shè)置成float16. td自動(dòng)換行的問題問題：Table寬度固定，td自動(dòng)換行解決：設(shè)置Table的table-layout:fi

20、xed，td的word-wrap:break-word17. 子容器浮動(dòng)后，父容器擴(kuò)展問題問題：子容器都float以后，父容器沒有設(shè)定高度,父容器將不會(huì)擴(kuò)展解決：只需要添加一個(gè)clear:both的div，代碼如下：<div style="border:1px solid #333;width:204px">    <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div>   

21、; <div style="width:100px;border:1px solid #333; float:left;">子容器b</div>    <div style="clear:both"></div></div>18. 透明png圖片會(huì)帶背景色問題：在ie6下透明的png圖片會(huì)帶一個(gè)背景色解決：background-image: url(icon_home.png);/* 其他瀏覽器 */background-repeat: no-repeat;_fil

22、ter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */_background-image: none; /* IE6 */19. list-style-position默認(rèn)值的問題問題：ie下list-style-position默認(rèn)為inside,   firefox默認(rèn)為outside解決：css中指定為outside即可解決兼容性問題 20. list-style-image準(zhǔn)確定位的問題問題：  

23、0;    li前設(shè)置圖片時(shí)，圖片與其后的文字對齊問題解決：1、采用背景定位 和 字符縮進(jìn)的方法background:url() no-repeat left center; text-index:16px;2、采用相對定位方法li 設(shè)置list-style:url();li的子元素position:relative;top:-5px;21. ul標(biāo)簽?zāi)J(rèn)值的問題問題：       ul標(biāo)簽在ff中默認(rèn)是有padding值的,而在ie中只有margin有值解決：   

24、0;   定義ulmargin:0;padding:0;就能解決大部分問題22. IE中l(wèi)i指定高度后，出現(xiàn)排版錯(cuò)誤問題：在ie下如果為li指定高度可能會(huì)出現(xiàn)排版錯(cuò)位解決：       設(shè)置line-height23. ul或li浮動(dòng)后，顯示在div外問題：div中的ul或li設(shè)置float以后，都不在div中解決：必須在ul標(biāo)簽后加<div style="clear:both"></div>來閉合外層div24. ul浮動(dòng)后，margin變大問題：ul設(shè)置 float后

25、，在ie中margin將變大解決：設(shè)置ul的display:inline，li的list-style-position:outside25. li浮動(dòng)后，margin變大問題：li設(shè)置 float后，在ie中margin將變大解決：設(shè)置li的display:inline26. 嵌套使用ul、li的問題問題： ie的bug，嵌套使用ul、li時(shí)，里層的li設(shè)置float以后，外層li不設(shè)置float, 里面的ul頂部和它外面的li總是有一段間距解決：設(shè)置里面的ul的zoom:1 27. IE6-7 li底部有3px的問題問題：     

26、  這個(gè)bug產(chǎn)生的充要條件是li的子元素浮動(dòng)并且li設(shè)置了以下CSS屬性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。解決：1、div設(shè)置clear:left|both，這時(shí)li不能設(shè)置width、height、zoom。 2、li設(shè)置float:left，這時(shí)li可以設(shè)置width、height、zoom。 3、li設(shè)置clear:left|both，這時(shí)li不能設(shè)置width、height、zoom。 4、IE6/IE7的這個(gè)Bug可以通過給li中的div設(shè)置vertical-a

27、lign:top|middle|bottom解決。 28. IE6 垂直列表間隙的問題問題：       li中有a且設(shè)置display:block時(shí)，ie6中列表間會(huì)出現(xiàn)空隙解決：1、li中加display:inline;2、li使用float  然后 clear:both;3、給包含的文本末尾添加一個(gè)空格4、設(shè)置width 29. IE6 列表背景顏色失效的問題問題：當(dāng)父元素設(shè)置position:relative;時(shí)，在ie6中第一個(gè)ul、ol、dl的背景顏色失效解決：  

28、0;    ul、ol、dl 都設(shè)置為position:relative; 30. IE6-7 列表背景顏色失效的問題2問題：做橫向?qū)Ш綑跁r(shí)，ul設(shè)置為float且有背景色，li設(shè)置為float。ie6-7背景顏色失效解決：很多ie的bug都可以通過觸發(fā)layout來解決 ul添加屬性1、height:1%;2、float:left;3、zoom:1; 31. 列表不能換行的問題問題：       li設(shè)置為浮動(dòng)，后面的li緊隨其后，不能換行解決：1、為這個(gè)ul定義合適的寬高2、給包含

29、這個(gè)ul 的父div定義合適的寬高。 32. li中的內(nèi)容以省略號(hào)顯示問題：li中內(nèi)容超過長度時(shí)，想以省略號(hào)顯示， 此方法適用于ie6-7-8、opera、safari瀏覽器 ff瀏覽器不支持解決：liwidth:200px; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;  33. 超鏈接訪問過后hover樣式不出現(xiàn)的問題問題：       點(diǎn)擊超鏈接后，hover、

30、active樣式?jīng)]有效果解決：       改變CSS屬性的排列順序: L-V-H-A   34. 禁用中文輸入法的問題問題：       不能在輸入框中輸入漢字解決：只在ie系列 和ff中有效ime-mode:disabled    (但可以粘貼)禁用粘貼：onpaste="return false" 35. 除去滾動(dòng)條的問題問題：     &#

31、160; 隱藏滾動(dòng)條解決：1、只有ie6-7支持<body scroll="no">2、除ie6-7不支持 bodyoverflow:hidden3、所有瀏覽器 htmloverflow:hidden 36. 讓層顯示在FLASH之上問題：       想讓層的內(nèi)容顯示在flash上解決：把FLASH設(shè)置透明1、<param name=" wmode " value="transparent" />2、<param name="

32、;wmode" value="opaque"/> 37. 去除鏈接虛線邊框的問題問題：當(dāng)點(diǎn)擊超鏈接后，ie6/7/8  ff會(huì)出現(xiàn)虛線邊框 ,而opera、safari沒有虛線邊框解決：ie6/7中 設(shè)置為a blr:expression(this.onFocus=this.blur() ie8 和 ff 都不支持expression  在ie8 、ff中設(shè)置為  :focus outline: none;  38. css濾鏡的問題問題：    css濾鏡只在ie中有效，F(xiàn)ir

33、efox, Safari(WebKit), Opera只能夠設(shè)置透明，它們不支持濾鏡filter，無法實(shí)現(xiàn)圖片切換中間變換的效果，只能通過透明度來設(shè)置。解決：       ff中設(shè)置透明度   -moz-opacity:0.10;  opacity:0.6;ie中只設(shè)置filter:alpha(opacity=50); 時(shí)，ie6-7失效，還要設(shè)置1、zoom:1;  2、width:100%; 39. IE6背景閃爍的問題問題：    

34、0;  鏈接、按鈕用CSS sprites作為背景，在ie6下會(huì)有背景圖閃爍的現(xiàn)象。原因是:IE6沒有將背景圖緩存，每次觸發(fā)hover的時(shí)候都會(huì)重新加載解決：       可以用JavaScript設(shè)置ie6緩存這些圖片：document.execCommand("BackgroundImageCache ",false,true); 40. 出現(xiàn)重復(fù)文字的問題問題：<div style="width:400px">  <div style=&qu

35、ot;float:left"></div>  <! _ >  <div style="float:right;width:400px">這就是多出來的那只豬</div></div>解決：1、  改變結(jié)構(gòu)，不出現(xiàn)【一個(gè)容器包含2兩個(gè)具有“float”樣式的子容器】的結(jié)構(gòu)。2、減小第二個(gè)容器的寬度，使父容器寬度減去第二個(gè)容器寬度的值大于33、去掉所有的注釋。4、修正注釋的寫法。<!-if !IE>這里是注釋內(nèi)容<!endif->5、在第二個(gè)容器后面加

36、一個(gè)或者多個(gè)<div style="clear"></div>來解決。41. ff、chrome絕對定位無效問題：在IE給td設(shè)置position:relative，然后給它包含的一個(gè)容器使用position:absolute進(jìn)行定位是有效的，但在FF和Chrome下卻不可以。解決：設(shè)置td的display:block。 42. IE6 絕對定位的問題問題：<div style="position:relative;border:1px solid orange;text-align:center;"><

37、;div style="position:absolute;top:0;left:0;background:#CCC;">dovapour</div><a href="#" title="vapour的blog">內(nèi)容</a></div>解決：left的定位錯(cuò)誤問題1、給父層設(shè)置zoom:1觸發(fā)layout。 2、給父層設(shè)置寬度width bottom的定位錯(cuò)誤問題1、給父層設(shè)置zoom:1觸發(fā)layout。 2、給父層設(shè)置高度height 43. 子容器寬度大

38、于父容器寬度時(shí)，內(nèi)容超出問題：子DIV的寬度和父DIV的寬度都已經(jīng)定義，在IE6中如果其子DIV的寬度大于父DIV的寬度，父DIV的寬度將會(huì)被擴(kuò)展，在其他瀏覽器中父DIV的寬度將不會(huì)擴(kuò)展，子DIV將超出父DIV解決：設(shè)置overflow:hidden，子DIV將不會(huì)超出父DIV。44. float的div閉合的問題問題： 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 fl

39、oat:left;)   這段代碼在IE中毫無問題，問題出在其他瀏覽器中。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽 閉合。解決：在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì) 產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear clear:both; 45. 單選框、復(fù)選框與后面的文字對不齊問

40、題：      單選框、復(fù)選框與后面的文字對不齊。解決：.alignfont-size:12px;.align input display:block; float:left;.align label display:block; float:left; padding-top:3px; *padding-top:5px;需注意的問題： 1. 設(shè)置padding后高度和寬帶都會(huì)增加說明：       除了ie5.5，其他所有瀏覽器中，設(shè)置padding以后高度和寬帶都會(huì)增加2. 使用X

41、HTML 1.0 Transitional后，div寬度說明：       在使用XHTML 1.0 Transitional以后div寬度都不包含border的寬度了，設(shè)置寬度的時(shí)候需要注意下。3. 外層相對定位，內(nèi)層絕對定位說明：ie6下，外層div的postion: relative，并設(shè)置text-align，內(nèi)層div的postion: absolute，這時(shí)內(nèi)層的位置是相對于text-align而言的例如：<div style="position:relative;border:1px solid oran

42、ge;text-align:center;zoom:1"> position:relative<div style="position:absolute;top:0;left:0;background:#CCC;">position:absolute</div> </div>4. &nbsp; 顯示的大小不一致說明：默認(rèn)字本顯示問題，導(dǎo)致&nbsp;顯示的大小不一致，在ie下比較小一點(diǎn)，其他的瀏覽器都一致，當(dāng)你使用了&nbsp;造成問題時(shí)請注意。5. 邊框重疊說明說明：為 table、td 都指定了

43、邊框后，然后使用border-collapse:collapse讓邊框重疊，可以看出在發(fā)生重疊時(shí)，F(xiàn)irefox 是用 td 覆蓋 table 的，而 IE 是用 table 覆蓋 td 的。使用時(shí)候需要注意。6. 設(shè)置td padding的說明說明：設(shè)置td的padding以后高度和寬帶都會(huì)增加,padding-left和padding-right的效果都一樣增加了td的寬帶，但是padding-top和padding-bottom的效果不一樣。最好不要使用td的ding-top和padding-bottom7. ul設(shè)置的說明說明：ul一般設(shè)置：list-style-type:none;m

44、argin:0px;padding:0px；li一般設(shè)置：list-style-type:none; list-style-position:outside8. 使一個(gè)層垂直居中于瀏覽器中說明：使用百分比絕對定位,與外補(bǔ)丁負(fù)值的技巧,負(fù)值的大小為其自身寬度高度除以二div position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red;  9. 萬能 float 閉合說明：可以用這個(gè)解決多個(gè)div對齊時(shí)的間距不對， 將以下代碼加

45、入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可<style>/* Clear Fix */.clearfix:after content:"."display:block;height:0; clear:both; visibility:hidden;.clearfix     display:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clear

46、fix */</style>10. 觸發(fā)layout說明：IE6中很多Bug都可以通過觸發(fā)layout得到解決.下列的CSS屬性或取值會(huì)讓一個(gè)元素獲得layout：        position:absolute 絕對定位元素的包含區(qū)塊(containing block)就會(huì)經(jīng)常在這一方面出問題float:left|right 由于layout元素的特性，浮動(dòng)模型會(huì)有很多怪異的表現(xiàn)display:inline-block 當(dāng)一個(gè)內(nèi)聯(lián)級(jí)別的元素需要layout的時(shí)候就往往符用到它，這也可能也是這個(gè)CSS

47、屬性的唯一效果-讓某個(gè)元素有l(wèi)ayoutwidth: 除auto外的任何值height: 除auto外的任何值zoom: 除auto外的任何值 11、如何使連續(xù)長字段自動(dòng)換行ff最新版本 word-wrap:break-word;就可以了ff舊版本 還要使用javascript完成文字換行<style type="text/css">div        width:300px;       word-wrap:break-word;

48、       border:1px solid red;       </style> <script type="text/javascript">function toBreakWord(intLen)var obj=document.getElementById("ff");var strContent=obj.innerHTML;  var strTemp=""wh

49、ile(strContent.length>intLen)strTemp+=strContent.substr(0,intLen)+"&#10;"  strContent=strContent.substr(intLen,strContent.length);  strTemp+="&#10;"+strContent;obj.innerHTML=strTemp;if(document.getElementById  &&  !document.all)  toBrea

50、kWord(37) 12、設(shè)置滾動(dòng)條顏色 只對ie系列有效 在html中 而不是設(shè)置body<style type="text/css">html        scrollbar-face-color:#f6f6f6;       scrollbar-highlight-color:#fff;       scrollbar-shadow-color:#eeeeee;

51、60;      scrollbar-3dlight-color:#eeeeee;       scrollbar-arrow-color:#000;       scrollbar-track-color:#fff;       scrollbar-darkshadow-color:#fff;      

52、</style>IE不支持float：inherit  overflow:hidden有2個(gè)用法，一個(gè)是隱藏溢出，另一個(gè)是清除浮動(dòng)。<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素<body oncontextmenu="return fals

53、e" ondragstart="return false"  tstart="return false"  scroll="auto">這行代碼放在body中，去掉了頁面鼠標(biāo)右鍵快捷菜單，達(dá)到防止圖片另存為的目的。javascript部分1. document.form.item 問題問題：代碼中存在 document.formName.item("itemName") 這樣的語句，不能在FF下運(yùn)行解決方法：改用 document.formName.elements"e

54、lementName"2. 集合類對象問題問題：代碼中許多集合類對象取用時(shí)使用()，IE能接受，F(xiàn)F不能解決方法：改用 作為下標(biāo)運(yùn)算，例：document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")13. window.event問題：使用 window.event 無法在FF上運(yùn)行解決方法：FF的 event 只能在事件發(fā)生的現(xiàn)場使用，此問題暫無法解決。可以把 event 傳到函數(shù)里變通解決：onMouseMove = "f

55、unctionName(event)"function functionName (e)     e = e | window.event;    .4. HTML對象的 id 作為對象名的問題問題：在IE中，HTML對象的 ID 可以作為 document 的下屬對象變量名直接使用，在FF中不能解決方法：使用對象變量時(shí)全部用標(biāo)準(zhǔn)的 getElementById("idName")5. 用 idName 字符串取得對象的問題問題：在IE中，利用 eval("idName") 可以取得 id 為 idNam

56、e 的HTML對象，在FF中不能解決方法：用 getElementById("idName") 代替 eval("idName")6. 變量名與某HTML對象 id 相同的問題問題：在FF中，因?yàn)閷ο?id 不作為HTML對象的名稱，所以可以使用與HTML對象 id 相同的變量名，IE中不能解決方法：在聲明變量時(shí)，一律加上 var ，以避免歧義，這樣在IE中亦可正常運(yùn)行最好不要取與HTML對象 id 相同的變量名，以減少錯(cuò)誤7. event.x 與 event.y 問題問題：在IE中，event 對象有x,y屬性，F(xiàn)F中沒有解決方法：在FF中，與 eve

57、nt.x 等效的是 event.pageX ，但event.pageX IE中沒有故采用 event.clientX 代替 event.x ，在IE中也有這個(gè)變量event.clientX 與 event.pageX 有微妙的差別，就是滾動(dòng)條要完全一樣，可以這樣：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x8. 關(guān)于frame問題：在IE中可以用 window.testFrame 取得該frame，F(xiàn)F中不行解決方法：window.top.document.getElementById("testFrame")

58、.src = 'xx.htm'window.top.frameName.location = 'xx.htm'9. 取得元素的屬性在FF中，自己定義的屬性必須 getAttribute() 取得10. 在FF中沒有 parentElement，parement.children 而用 parentNode，parentNode.childNodes問題：childNodes 的下標(biāo)的含義在IE和FF中不同，F(xiàn)F的 childNodes 中會(huì)插入空白文本節(jié)點(diǎn)解決方法：可以通過 node.getElementsByTagName() 來回避這個(gè)問題問題：當(dāng)html中節(jié)點(diǎn)缺失時(shí)，IE和FF對 parentNode 的解釋不同，例如：<form><table><input/></table></form>FF中 input.parentNode 的值為form，而IE中 input.parentNode 的值為空節(jié)點(diǎn)問題：FF中節(jié)點(diǎn)自己沒有 removeNode 方法解決方法：必須使用如下方法 node

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論