JAVASCRIPT IE 및 FF_Experience 교환에서 호환되는 쓰기 기록-CSS 튜토리얼-php.cn

png transparent AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

활성화: 선택 사항 . 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true: 기본값입니다. 필터가 활성화되었습니다. false: 필터가 비활성화됩니다.
크기 조정 방법: 선택 사항입니다. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방법을 설정하거나 검색합니다. 자르기: 개체 크기에 맞게 이미지를 자릅니다. 이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다. scale: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.
src: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.

firefox는 innerText를 지원할 수 없습니다
firefox는 innerHTML을 지원하지만 innerText는 지원하지 않습니다. innerText를 구현하기 위해 textContent를 지원하지만 기본적으로 추가 공백도 유지됩니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다.

웹 콘텐츠 선택 금지
일반적으로 IE에서는 js를 사용합니다: obj.onselectstart=function(){return false;}
Firefox는 CSS를 사용합니다:-moz-user -select:none

필터 지원(예: 투명도 필터)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10 ;

이벤트 캡처
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);

마우스 위치 가져오기
IE: event.clientX, event.clientY
firefox: 이벤트 함수는 이벤트 객체
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV를 전달하는 데 필요하며 기타 요소 테두리 문제
예: div의 CSS 설정: {width:100px;height:100px;border:#000000 1px solid;}
IE에서: div의 너비(포함) 테두리 너비): 100px , div 높이(테두리 너비 포함): 100px
및 Firefox: div 너비(테두리 너비 포함): 102px, div 높이(테두리 포함) width): 102px;

판단 브라우저 유형
var isIE=document.all ? true : false;
document.all 구문이 지원되는 경우 변수를 작성했습니다. then isIE=true, 그렇지 않으면 isIE=false

다른 브라우저에서 CSS 처리
일반적으로 !important를 사용하여 CSS 문 사용의 우선순위를 지정할 수 있습니다(firefox에서만 지원)
예: {border-width:0px!important;border-width: 1px;}
이 요소는 Firefox에서는 테두리가 없지만 IE에서는 테두리 너비가 1px입니다.

문서 .formName.item("itemName") 문제
문제 참고: IE에서는 Firefox에서 document.formName.item("itemName") 또는 document.formName.elements ["elementName"]를 사용할 수 있습니다. document.formName.elements["elementName"]만 사용할 수 있습니다.
해결책: document.formName.elements["elementName"]를 균일하게 사용하세요.

컬렉션 개체 문제
문제 설명: IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만, Firefox에서는 []만 사용하여 컬렉션을 얻을 수 있습니다. 사물.
해결책: 컬렉션 개체를 얻으려면 []를 균일하게 사용하세요.

사용자 정의 속성 문제
문제 설명: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 가져오거나 getAttribute()를 사용하여 사용자 정의 속성을 가져올 수 있습니다. Firefox 이 상황에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.

eval("idName") 문제
문제 설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 ID가 있는 HTML을 가져올 수 있습니다. idName 개체; Firefox에서는 getElementById("idName")만 사용하여 id가 idName인 HTML 개체를 얻을 수 있습니다.
해결책: getElementById("idName")를 균일하게 사용하여 id가 idName인 HTML 개체를 가져옵니다.

변수명이 HTML 객체의 ID와 동일한 문제
문제 설명: IE에서 HTML 객체의 ID를 하위 항목으로 직접 사용할 수 있음 문서의 개체 변수 이름이지만 Firefox에서는 사용할 수 없습니다. Firefox에서는 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하세요. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var 키워드를 추가하세요.

const 문제
문제 설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서 상수를 정의할 수 있지만 var 키워드만 사용하여 상수를 정의할 수 있습니다. .
해결책: var 키워드를 균일하게 사용하여 상수를 정의하세요.

Masalah atribut input.type
Perihalan masalah: Atribut input.type di bawah IE ialah baca-sahaja tetapi atribut input.type di bawah Firefox ialah baca-tulis.
Penyelesaian: Jangan ubah suai atribut input.type. Jika anda mesti mengubah suainya, anda boleh menyembunyikan input asal dahulu, dan kemudian memasukkan elemen input baharu pada kedudukan yang sama.

masalah window.event
Perihalan masalah: window.event hanya boleh dijalankan di bawah IE, tetapi bukan di bawah Firefox Ini kerana acara Firefox hanya boleh dijalankan apabila sesuatu peristiwa berlaku untuk kegunaan di tapak.
Penyelesaian: Tambahkan parameter acara pada fungsi tempat peristiwa berlaku dan gunakan var myEvent = evt?evt:(window.event?window.event:null)
Contoh dalam badan fungsi (dengan andaian parameter formal is evt) ：
<script> function doSomething(evt) { var myEvent = evt ? window.event : null) … } Masalah dengan event.x dan event.y Perihalan masalah: Di bawah IE, objek genap mempunyai atribut x dan y, tetapi bukan atribut pageX dan pageY di bawah Firefox, objek genap mempunyai pageX, atribut pageY, tetapi tiada atribut x, y. Penyelesaian: var myX = event.x ? event.x : event.pageX;var myY = event.y ? . event.srcElement problemPerihalan masalah: Di bawah IE, objek genap mempunyai atribut srcElement, tetapi tiada atribut sasaran di bawah Firefox, objek genap mempunyai atribut sasaran, tetapi tiada atribut srcElement. Penyelesaian: Gunakan srcObj = event.srcElement ? event.srcElement : event.target; Jika anda mempertimbangkan soalan ke-8, hanya gunakan myEvent dan bukannya acara. masalah window.location.hrefPenerangan masalah: Di bawah IE atau Firefox2.0.x, anda boleh menggunakan window.location atau window.location.href; x Di bawah keadaan ini, hanya window.location boleh digunakan. Penyelesaian: Gunakan window.location dan bukannya window.location.href. Sudah tentu, anda juga boleh mempertimbangkan untuk menggunakan kaedah location.replace(). Masalah dengan tetingkap modal dan bukan modalPenerangan masalah: Di bawah IE, tetingkap modal dan bukan modal boleh dibuka melalui showModalDialog dan showModelessDialog di bawah Firefox, ini tidak boleh dilakukan . Penyelesaian: Gunakan terus window.open(pageURL,nama,parameter) untuk membuka tetingkap baharu. Jika anda perlu menghantar parameter dalam tetingkap anak kembali ke tetingkap induk, anda boleh menggunakan window.opener dalam tetingkap anak untuk mengakses tetingkap induk. Jika anda memerlukan tetingkap induk untuk mengawal tetingkap anak, gunakan var subWindow = window.open(pageURL,name,parameters); Isu bingkai dan iframeAmbil bingkai berikut sebagai contoh: <frame src=”xxx.html” id=”frameId” name=”frameName” />(1) Akses objek bingkai IE: gunakan tetingkap .frameId Atau window.frameName untuk mengakses objek bingkai ini; Firefox: Gunakan window.frameName untuk mengakses objek bingkai ini; (2) Tukar kandungan bingkai Dalam kedua-dua IE dan Firefox, anda boleh menggunakan window.document.getElementById("frameId").src = "xxx.html" atau window.frameName.location = " xxx. html" untuk menukar kandungan bingkai; Jika anda perlu menghantar parameter dalam bingkai kembali ke tetingkap induk, anda boleh menggunakan kata kunci induk dalam bingkai untuk mengakses tetingkap induk. masalah pemuatan badan Perihalan masalah: Objek badan Firefox wujud sebelum tag badan dibaca sepenuhnya oleh penyemak imbas manakala objek badan IE mesti berada dalam tag badan Ia tidak wujud sehingga ia dibaca sepenuhnya oleh penyemak imbas. [Nota] Isu ini belum disahkan lagi dan akan diubah suai selepas pengesahan. [Nota] Telah disahkan bahawa masalah di atas tidak wujud dalam IE6, Opera9 dan FireFox2 Skrip JS mudah boleh mengakses semua objek dan elemen yang telah dimuatkan sebelum skrip, walaupun elemen belum dimuatkan. belum lagi. Kaedah delegasi acara Penerangan masalah: Di bawah IE, gunakan document.body.onload = inject di mana fungsi inject() telah dilaksanakan sebelum ini di bawah Firefox, gunakan document.body .onload = inject();Penyelesaian: Gunakan document.body.onload=new Function("inject()"); atau document.body.onload = function(){/* Berikut ialah kod */} [Nota] Perbezaan antara Fungsi dan fungsi Perbezaan dalam elemen induk yang diakses Penerangan masalah: Di bawah IE, gunakan obj.parentElement atau obj.parentNode Akses induk nod obj; di bawah Firefox, gunakan obj.parentNode untuk mengakses nod induk obj. Penyelesaian: Oleh kerana firefox dan IE menyokong DOM, obj.parentNode digunakan secara seragam untuk mengakses nod induk obj. kursor:tangan VS kursor:penunjuk Penerangan masalah: Firefox tidak menyokong tangan, tetapi IE menyokong penunjuk, kedua-duanya adalah arahan tangan. Penyelesaian: Gunakan penunjuk secara seragam. Masalah dengan innerText Perihalan masalah: innerText boleh berfungsi seperti biasa dalam IE, tetapi innerText tidak berfungsi dalam FireFox. Penyelesaian: Gunakan textContent dan bukannya innerText dalam pelayar bukan IE. Contoh: if(navigator.appName.indexOf("Explorer") >-1){ document.getElementById("element").innerText = "my text"; }else{ document.getElementById("element").textContent = "teks saya"; } [Nota] innerHTML disokong oleh pelayar seperti IE dan Firefox Lain-lain, seperti outerHTML, hanya disokong oleh IE. , adalah lebih baik untuk tidak menggunakannya. Masalah penetapan lebar dan ketinggian objek Perihalan masalah: Pernyataan yang serupa dengan obj.style.height = imgObj.height dalam FireFox adalah tidak sah. Penyelesaian: Gunakan obj.style.height = imgObj.height + “px” secara seragam; Masalah pengendalian jadual Perihalan masalah: iaitu, firefox dan penyemak imbas lain Operasi teg jadual adalah berbeza Dalam IE, penetapan innerHTML jadual dan tr tidak dibenarkan Apabila menggunakan js untuk menambah tr, kaedah appendChild tidak berfungsi. Penyelesaian: //Tambahkan baris kosong pada jadual: baris var = otable.insertRow(-1); var cell = document.createElement("td"); cell.innerHTML = “”; cell.className = “XXXX”; row.appendChild(cell); [Nota] Memandangkan saya jarang menggunakan JS untuk mengendalikan jadual secara langsung, saya tidak pernah menghadapi masalah ini . Adalah disyorkan untuk menggunakan rangka kerja JS untuk mengendalikan jadual, seperti JQuery. Masalah lekukan senarai ul dan ol Apabila menghapuskan lekukan ul, ol dan senarai lain, gaya hendaklah ditulis sebagai: list-style:none;margin:0px ;padding:0px ; Atribut margin adalah sah untuk IE dan atribut padding adalah sah untuk FireFox. ← Ayat ini salah dinyatakan untuk butiran, sila lihat ↓ [Nota] Isu ini sebenarnya belum disahkan dan akan diubah suai selepas pengesahan. [Nota] Telah disahkan bahawa dalam IE, tetapan margin:0px boleh mengalih keluar inden atas, bawah, kiri dan kanan, kosong dan nombor senarai atau titik dalam senarai tidak mempunyai kesan pada gaya; dalam Firefox, menetapkan margin:0px sahaja Anda boleh mengalih keluar ruang atas dan bawah Selepas menetapkan padding:0px, anda hanya boleh mengalih keluar inden kiri dan kanan Anda juga mesti menetapkan list-style:none untuk mengalih keluar nombor senarai atau titik. Dalam erti kata lain, dalam IE, hanya margin:0px boleh ditetapkan untuk mencapai kesan akhir, manakala dalam Firefox, margin:0px, padding:0px dan list-style:none mesti ditetapkan pada masa yang sama untuk mencapai kesan akhir. Isu ketelusan CSS IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). FF:opacity:0.6. [Nota] Adalah lebih baik untuk menulis kedua-duanya dan meletakkan atribut kelegapan di bawah. Masalah penjuru bulat CSS IE: versi di bawah ie7 tidak menyokong penjuru bulat. FF: -moz-border-radius:4px, atau -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -jejari-sempadan-kanan bawah:4px;. [Nota] Masalah sudut bulat ialah masalah klasik dalam CSS. Adalah disyorkan untuk menggunakan set bingkai JQuery untuk menetapkan sudut bulat dan menyerahkan isu kompleks ini kepada orang lain.</script>