posts - 0, comments - 77, trackbacks - 0, articles - 356
            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理
          1.firefox不能對(duì)innerText支持。
          firefox支持innerHTML但卻不支持innerText,它支持textContent來(lái)實(shí)現(xiàn)innerText,不過(guò)默認(rèn)把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代碼也可以用innerHTML代替。

          2.禁止選取網(wǎng)頁(yè)內(nèi)容:
          在IE中一般用js:obj.onselectstart=function(){return false;}
          而firefox用CSS:-moz-user-select:none

          3.濾鏡的支持(例:透明濾鏡):
          IE:filter:alpha(opacity=10);
          firefox:-moz-opacity:.10;

          4.捕獲事件:
          IE:obj.setCapture() 、obj.releaseCapture()
          Firefox: document.addEventListener("mousemove",mousemovefunction,true);
          document.removeEventListener("mousemove",mousemovefunction,true);

          5.獲取鼠標(biāo)位置:
          IE:event.clientX、event.clientY
          firefox:需要事件函數(shù)傳遞事件對(duì)象
          obj.onmousemove=function(ev){
               X= ev.pageX;Y=ev.pageY;
          }

          6.DIV等元素的邊界問(wèn)題:
          比如:設(shè)置一個(gè)div的CSS::{width:100px;height:100px;border:#000000 1px solid;}
          IE中:div的寬度(包括邊框?qū)挾龋?00px,div的高度(包括邊框?qū)挾龋?00px;
          而firefox:div的寬度(包括邊框?qū)挾龋?02px,div的高度(包括邊框?qū)挾龋?02px;


          所以在做這個(gè)兼容IE和firefox的拖動(dòng)窗口時(shí),在js和css的寫法上要?jiǎng)狱c(diǎn)腦筋,給大家兩個(gè)小技巧

          一.判斷瀏覽器類型:
          var isIE=document.all? true:false;
          我寫了一個(gè)變量,如果支持document.all語(yǔ)法那么isIE=true,否則isIE=false

          二.在不同瀏覽器下的CSS處理:
          一般可以用!important來(lái)優(yōu)先使用css語(yǔ)句(僅firefox支持)
          比如:{border-width:0px!important;border-width:1px;}
          在firefox下這個(gè)元素是沒(méi)有邊框的,在IE下邊框?qū)挾仁?px

                1.document.formName.item("itemName") 問(wèn)題
          問(wèn)題說(shuō)明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。
          解決方法:統(tǒng)一使用document.formName.elements["elementName"]。

          2.集合類對(duì)象問(wèn)題
          問(wèn)題說(shuō)明:IE下,可以使用 () 或 [] 獲取集合類對(duì)象;Firefox下,只能使用 [ ]獲取集合類對(duì)象。
          解決方法:統(tǒng)一使用 [] 獲取集合類對(duì)象。

          3.自定義屬性問(wèn)題
          問(wèn)題說(shuō)明:IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用 getAttribute() 獲取自定義屬性;Firefox下,只能使用 getAttribute() 獲取自定義屬性。
          解決方法:統(tǒng)一通過(guò) getAttribute() 獲取自定義屬性。

          4.eval("idName")問(wèn)題
          問(wèn)題說(shuō)明:IE下,可以使用 eval("idName") 或 getElementById("idName") 來(lái)取得 id 為 idName 的HTML對(duì)象;Firefox下,只能使用 getElementById("idName") 來(lái)取得 id 為 idName 的HTML對(duì)象。
          解決方法:統(tǒng)一用 getElementById("idName") 來(lái)取得 id 為 idName 的HTML對(duì)象。

          5.變量名與某HTML對(duì)象ID相同的問(wèn)題
          問(wèn)題說(shuō)明:IE下,HTML對(duì)象的ID可以作為 document 的下屬對(duì)象變量名直接使用,F(xiàn)irefox下則不能;Firefox下,可以使用與HTML對(duì)象ID相同的變量名,IE下則不能。
          解決方法:使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML對(duì)象ID相同的變量名,以減少錯(cuò)誤;在聲明變量時(shí),一律加上var關(guān)鍵字,以避免歧義。

          6.const問(wèn)題
          問(wèn)題說(shuō)明:Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量;IE下,只能使用var關(guān)鍵字來(lái)定義常量。
          解決方法:統(tǒng)一使用var關(guān)鍵字來(lái)定義常量。

          7.input.type屬性問(wèn)題
          問(wèn)題說(shuō)明:IE下 input.type 屬性為只讀;但是Firefox下 input.type 屬性為讀寫。
                 解決辦法:不修改 input.type 屬性。如果必須要修改,可以先隱藏原來(lái)的input,然后在同樣的位置再插入一個(gè)新的input元素。

          8.window.event問(wèn)題
          問(wèn)題說(shuō)明:window.event 只能在IE下運(yùn)行,而不能在Firefox下運(yùn)行,這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用。
          解決方法:在事件發(fā)生的函數(shù)上加上event參數(shù),在函數(shù)體內(nèi)(假設(shè)形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
                 示例:<input type="button" onclick="doSomething(event)"/>
          <script language="javascript">
          function doSomething(evt) {
          var myEvent = evt?evt:(window.event?window.event:null)
          ...
          }

                 9.event.x與event.y問(wèn)題
          問(wèn)題說(shuō)明:IE下,even對(duì)象有x、y屬性,但是沒(méi)有pageX、pageY屬性;Firefox下,even對(duì)象有pageX、pageY屬性,但是沒(méi)有x、y屬性。
          解決方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
                 如果考慮第8條問(wèn)題,就改用myEvent代替event即可。

          10.event.srcElement問(wèn)題
          問(wèn)題說(shuō)明:IE下,even對(duì)象有srcElement屬性,但是沒(méi)有target屬性;Firefox下,even對(duì)象有target屬性,但是沒(méi)有srcElement屬性。
          解決方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
                 如果考慮第8條問(wèn)題,就改用myEvent代替event即可。

          11.window.location.href問(wèn)題
          問(wèn)題說(shuō)明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。
          解決方法:使用 window.location 來(lái)代替 window.location.href。當(dāng)然也可以考慮使用 location.replace()方法。

          12.模態(tài)和非模態(tài)窗口問(wèn)題
          問(wèn)題說(shuō)明:IE下,可以通過(guò)showModalDialog和showModelessDialog打開(kāi)模態(tài)和非模態(tài)窗口;Firefox下則不能。
          解決方法:直接使用 window.open(pageURL,name,parameters) 方式打開(kāi)新窗口。
                 如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來(lái)訪問(wèn)父窗口。如果需要父窗口控制子窗口的話,使用var subWindow = window.open(pageURL,name,parameters); 來(lái)獲得新開(kāi)的窗口對(duì)象。

          13.frame和iframe問(wèn)題
          以下面的frame為例:
          <frame src="xxx.html" id="frameId" name="frameName" />
          (1)訪問(wèn)frame對(duì)象
          IE:使用window.frameId或者window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象;
          Firefox:使用window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象;
                 解決方法:統(tǒng)一使用 window.document.getElementById("frameId") 來(lái)訪問(wèn)這個(gè)frame對(duì)象;

          (2)切換frame內(nèi)容
          在IE和Firefox中都可以使用window.document.getElementById("frameId").src = "xxx.html"或window.frameName.location = "xxx.html"來(lái)切換frame的內(nèi)容;
          如果需要將frame中的參數(shù)傳回父窗口,可以在frame中使用parent關(guān)鍵字來(lái)訪問(wèn)父窗口。

          14.body載入問(wèn)題
          問(wèn)題說(shuō)明:Firefox的body對(duì)象在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在;而IE的body對(duì)象則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在。
                 [注] 這個(gè)問(wèn)題尚未實(shí)際驗(yàn)證,待驗(yàn)證后再來(lái)修改。
                 [注] 經(jīng)驗(yàn)證,IE6、Opera9以及FireFox2中不存在上述問(wèn)題,單純的JS腳本可以訪問(wèn)在腳本之前已經(jīng)載入的所有對(duì)象和元素,即使這個(gè)元素還沒(méi)有載入完成。

          15. 事件委托方法
          問(wèn)題說(shuō)明:IE下,使用 document.body.onload = inject; 其中function inject()在這之前已被實(shí)現(xiàn);在Firefox下,使用 document.body.onload = inject();
          解決方法:統(tǒng)一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 這里是代碼 */}
                 [注意] Function和function的區(qū)別

          16.訪問(wèn)的父元素的區(qū)別
          問(wèn)題說(shuō)明:在IE下,使用 obj.parentElement 或 obj.parentNode 訪問(wèn)obj的父結(jié)點(diǎn);在firefox下,使用 obj.parentNode 訪問(wèn)obj的父結(jié)點(diǎn)。
          解決方法:因?yàn)閒irefox與IE都支持DOM,因此統(tǒng)一使用obj.parentNode 來(lái)訪問(wèn)obj的父結(jié)點(diǎn)。

          17.cursor:hand VS cursor:pointer
          問(wèn)題說(shuō)明:firefox不支持hand,但ie支持pointer ,兩者都是手形指示。
          解決方法:統(tǒng)一使用pointer。

          18.innerText的問(wèn)題.
                 問(wèn)題說(shuō)明:innerText在IE中能正常工作,但是innerText在FireFox中卻不行。
                 解決方法:在非IE瀏覽器中使用textContent代替innerText。
                 示例:
          if(navigator.appName.indexOf("Explorer") >-1){
          document.getElementById('element').innerText = "my text";
          } else{
          document.getElementById('element').textContent = "my text";
          }
                 [注] innerHTML 同時(shí)被ie、firefox等瀏覽器支持,其他的,如outerHTML等只被ie支持,最好不用。

          19. 對(duì)象寬高賦值問(wèn)題
            問(wèn)題說(shuō)明:FireFox中類似 obj.style.height = imgObj.height 的語(yǔ)句無(wú)效。
                 解決方法:統(tǒng)一使用 obj.style.height = imgObj.height + 'px';

          20. Table操作問(wèn)題
                 問(wèn)題說(shuō)明:ie、firefox以及其它瀏覽器對(duì)于 table 標(biāo)簽的操作都各不相同,在ie中不允許對(duì)table和tr的innerHTML賦值,使用js增加一個(gè)tr時(shí),使用appendChild方法也不管用。
          解決方法:
          //向table追加一個(gè)空行:
          var row = otable.insertRow(-1);
          var cell = document.createElement("td");
          cell.innerHTML = "";
          cell.className = "XXXX";
          row.appendChild(cell);
                 [注] 由于俺很少使用JS直接操作表格,這個(gè)問(wèn)題沒(méi)有遇見(jiàn)過(guò)。建議使用JS框架集來(lái)操作table,如JQuery。

          21. ul和ol列表縮進(jìn)問(wèn)題
            消除ul、ol等列表的縮進(jìn)時(shí),樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px;
          其中margin屬性對(duì)IE有效,padding屬性對(duì)FireFox有效。← 此句表述有誤,詳細(xì)見(jiàn)↓
                 [注] 這個(gè)問(wèn)題尚未實(shí)際驗(yàn)證,待驗(yàn)證后再來(lái)修改。
                 [注] 經(jīng)驗(yàn)證,在IE中,設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號(hào)或圓點(diǎn),設(shè)置padding對(duì)樣式?jīng)]有影響;在Firefox中,設(shè)置margin:0px僅僅可以去除上下的空白,設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn),還必須設(shè)置list-style:none才能去除列表編號(hào)或圓點(diǎn)。也就是說(shuō),在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果,而在Firefox中必須同時(shí)設(shè)置margin:0px、padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。

          22. CSS透明問(wèn)題
          IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
          FF:opacity:0.6。
                 [注] 最好兩個(gè)都寫,并將opacity屬性放在下面。

          23. CSS圓角問(wèn)題
          IE:ie7以下版本不支持圓角。
          FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
                 [注] 圓角問(wèn)題是CSS中的經(jīng)典問(wèn)題,建議使用JQuery框架集來(lái)設(shè)置圓角,讓這些復(fù)雜的問(wèn)題留給別人去想吧。

          關(guān)于CSS中的問(wèn)題實(shí)在太多了,甚至同樣的CSS定義在不同的頁(yè)面標(biāo)準(zhǔn)中的顯示效果都是不一樣的。一個(gè)合乎發(fā)展的建議是,頁(yè)面采用標(biāo)準(zhǔn)DHTML標(biāo)準(zhǔn)編寫,較少使用table,CSS定義盡量依照標(biāo)準(zhǔn)DOM,同時(shí)兼顧IE、Firefox、Opera等主流瀏覽器。BTW,很多情況下,F(xiàn)F和Opera的CSS解釋標(biāo)準(zhǔn)更貼近CSS標(biāo)準(zhǔn),也更具有規(guī)范性。
          主站蜘蛛池模板: 湾仔区| 舒兰市| 荣成市| 庄河市| 屏东市| 大同市| 和龙市| 云浮市| 揭西县| 武汉市| 白山市| 耿马| 临夏市| 江安县| 阜宁县| 连南| 六盘水市| 巨野县| 安平县| 兴国县| 庆阳市| 扬中市| 措美县| 汾西县| 慈利县| 洛隆县| 中卫市| 冀州市| 北票市| 宜丰县| 金昌市| 城步| 中卫市| 玉树县| 昌都县| 秭归县| 乐清市| 兰西县| 抚松县| 平利县| 喜德县|