CSS และ JavaScript ใน IE และ Firefox Twenty-Three ความแตกต่าง

1. document.formname.item ("itemname") คำอธิบายปัญหา: ภายใต้ IE คุณสามารถใช้ document.formname.item ("itemname") หรือ document.formname.elements ["ElementName"]; document.formname.item ("itemname") หรือ document.formname.elements ["ElementName"]; .
วิธีแก้ปัญหา: ใช้ document.formname.elements ["ElementName"] ในลักษณะที่เป็นเอกภาพ

2. คำอธิบายของปัญหาของวัตถุคลาสคอลเลกชัน: ใน IE คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคลาสคอลเลกชัน;
วิธีแก้ปัญหา: ใช้ [] เพื่อรับวัตถุคลาสคอลเลกชันในลักษณะที่เป็นเอกภาพ

3. คำอธิบายปัญหาแอตทริบิวต์ที่กำหนดเอง: ใน IE คุณสามารถใช้วิธีการรับแอตทริบิวต์ปกติเพื่อรับแอตทริบิวต์ที่กำหนดเองหรือคุณสามารถใช้ GetAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเอง .
วิธีแก้ปัญหา: ได้รับแอตทริบิวต์ที่กำหนดเองอย่างสม่ำเสมอผ่าน GetAttribute ()

4. eval ("idname") คำอธิบายปัญหา: ใน IE คุณสามารถใช้ eval ("idname") หรือ getElementById ("idname") เพื่อรับวัตถุ HTML ด้วย idName; เพื่อให้ได้วัตถุ HTML ที่มี ID เป็น IdName
วิธีแก้ปัญหา: ใช้ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย ID เป็นชื่อ IDNAME

5. ปัญหาที่มีชื่อตัวแปรเดียวกันกับ ID วัตถุ HTML: ภายใต้ IE, ID ของวัตถุ HTML สามารถใช้โดยตรงเป็นชื่อตัวแปรของวัตถุย่อยของเอกสาร แต่ไม่ใช่ใน Firefox; สามารถใช้ ID วัตถุ HTML ได้
วิธีแก้ปัญหา: ใช้ document.getElementById ("idname") แทน document.idname เป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรที่มี ID วัตถุ HTML เดียวกันเพื่อลดข้อผิดพลาด

6. คำอธิบายปัญหา const: ภายใต้ Firefox คุณสามารถใช้คำหลัก const หรือคำหลัก VAR เพื่อกำหนดค่าคงที่;
วิธีแก้ปัญหา: ใช้คำหลัก VAR เพื่อกำหนดค่าคงที่อย่างสม่ำเสมอ

7. คำอธิบายของปัญหาของแอตทริบิวต์อินพุต: แอตทริบิวต์อินพุต. ประเภทภายใต้ IE คือการอ่านอย่างเดียว
วิธีแก้ปัญหา: อย่าแก้ไขคุณสมบัติ input.type หากคุณต้องแก้ไขคุณสามารถซ่อนอินพุตดั้งเดิมก่อนจากนั้นแทรกองค์ประกอบอินพุตใหม่ในตำแหน่งเดียวกัน

8. Window.event ปัญหาคำอธิบาย: หน้าต่างสามารถทำงานได้ภายใต้ IE เท่านั้นไม่ใช่ภายใต้ Firefox เนื่องจากเหตุการณ์ Firefox สามารถใช้กับเหตุการณ์ที่เกิดขึ้นได้เท่านั้น
วิธีแก้ปัญหา: เพิ่มพารามิเตอร์เหตุการณ์ในฟังก์ชั่นที่เหตุการณ์เกิดขึ้นและใช้ var myEvent = evt? eVt: (window.event? window.event: null)
ตัวอย่าง:

รหัสโปรแกรม
<อินพุต type = "ปุ่ม" onclick = "dosomething (เหตุการณ์)"/>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น dosomething (evt) {
var myEvent = evt? eVt: (window.event? window.event: null)
-
-
</script>

9. Event.x และ Event.y คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ X และ Y แต่ไม่มีแอตทริบิวต์ PageX และ Pagey;
การแก้ไข: var myx = event.x? event.x: event.pagex;
หากคุณพิจารณาปัญหาที่ 8 เพียงใช้ MyEvent แทนเหตุการณ์

10. เหตุการณ์คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีคุณสมบัติ SRCELEMENT แต่ไม่มีคุณสมบัติเป้าหมาย
วิธีแก้ปัญหา: ใช้ SRCOBJ = Event.srcelement?
หากคุณพิจารณาปัญหาที่ 8 เพียงใช้ MyEvent แทนเหตุการณ์

11. window.location.href ปัญหาคำอธิบาย: ภายใต้ IE หรือ Firefox2.0.x คุณสามารถใช้ Window.location หรือ Window.location.href;
วิธีแก้ปัญหา: ใช้ window.location แทน window.location.href แน่นอนคุณสามารถพิจารณาใช้วิธีการตั้งสถานที่ ()

12. คำอธิบายของปัญหาหน้าต่างโมดอลและไม่ใช่โมดอล: ภายใต้ IE, หน้าต่างโมดอลและไม่ใช่โมดอลสามารถเปิดได้ผ่าน showmodaldialog และ showmodelessDialog;
วิธีแก้ปัญหา: ใช้ window.open (pageurl, ชื่อ, พารามิเตอร์) เพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างพาเรนต์คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างพาเรนต์ หากหน้าต่างหลักจำเป็นต้องควบคุมหน้าต่างลูกให้ใช้ var subwindow = window.open (pageurl, ชื่อ, พารามิเตอร์);

สิบสามเฟรม
<frame src = "http://www.abc.com/123.html" id = "frameid" name = "framename"/>>>>> >>
(1) เข้าถึงวัตถุเฟรมเช่น: ใช้ window.frameId หรือ window.frameName เพื่อเข้าถึงวัตถุเฟรมนี้
Firefox: ใช้ window.frameName เพื่อเข้าถึงวัตถุเฟรมนี้;
วิธีแก้ปัญหา: ใช้ window.document.getElementById ("frameid") เพื่อเข้าถึงวัตถุเฟรมนี้;
(2) สวิตช์เนื้อหาเฟรมทั้งใน IE และ Firefox คุณสามารถใช้ window.document.getElementById ("frameid"). src = "index.html" หรือ window.framename.location = "index.html" E;
หากคุณต้องการส่งพารามิเตอร์ในเฟรมกลับไปที่หน้าต่างหลักคุณสามารถใช้คำหลักหลักในเฟรมเพื่อเข้าถึงหน้าต่างพาเรนต์

14. ปัญหาการโหลดร่างกายคำอธิบาย: วัตถุร่างกายของ Firefox มีอยู่ก่อนที่แท็กร่างกายจะถูกอ่านโดยเบราว์เซอร์อย่างเต็มที่
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการตรวจสอบจริงและจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] ได้รับการพิสูจน์แล้วว่าปัญหาข้างต้นไม่มีอยู่ใน IE6, Opera9 และ Firefox2

15. คำอธิบายของวิธีการมอบหมายเหตุการณ์: ใน IE, ใช้ document.body.onload = inject;
วิธีแก้ปัญหา: ใช้ document.body.onload = ฟังก์ชั่นใหม่ ('inject ()'); หรือ document.body.onload = function () {/* นี่คือรหัส*/}
[หมายเหตุ] ความแตกต่างระหว่างฟังก์ชั่นและฟังก์ชั่น

16. การเปิดเผยความแตกต่างระหว่างองค์ประกอบหลักที่เข้าถึงได้: ใน IE, ใช้ obj.parentelement หรือ obj.parentnode เพื่อเข้าถึงโหนดแม่ของ OBJ
วิธีแก้ปัญหา: เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM, OBJ.ParentNode ใช้เพื่อเข้าถึงโหนดพาเรนต์ของ OBJ

17. เคอร์เซอร์: Hand vs Cursor: Pointer
คำอธิบายปัญหา: Firefox ไม่รองรับมือ แต่เช่นสนับสนุนตัวชี้ทั้งสองเป็นตัวบ่งชี้รูปมือ
วิธีแก้ปัญหา: ใช้ตัวชี้ในแบบครบวงจร

18. ปัญหาของข้อความ innerText
คำอธิบายปัญหา: InnerText ทำงานได้อย่างถูกต้องใน IE แต่ InnerText ไม่ทำงานใน Firefox
วิธีแก้ปัญหา: ใช้ textContent แทน innerText ในเบราว์เซอร์ที่ไม่ใช่ IE
ตัวอย่าง:

รหัสโปรแกรม
if (navigator.appname.indexof ("Explorer")> -1) {
document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน";
} อื่น{
document.getElementById ('องค์ประกอบ'). textContent = "ข้อความของฉัน";
-

[หมายเหตุ] InnerHTML ได้รับการสนับสนุนโดยเบราว์เซอร์เช่น IE และ Firefox

19. คำอธิบายของปัญหาความกว้างของวัตถุและการกำหนดความสูง: คำสั่งคล้ายกับ obj.style.height = imgobj.height ใน Firefox ไม่ถูกต้อง
วิธีแก้ปัญหา: ใช้ obj.style.height = imgobj.height + 'px' ในเครื่องแบบ;

20. คำอธิบายปัญหาการทำงานของตาราง: เช่นเบราว์เซอร์อื่น ๆ และเบราว์เซอร์อื่น ๆ มีการดำเนินการที่แตกต่างกันในแท็กตาราง
สารละลาย:

รหัสโปรแกรม
// เพิ่มบรรทัดว่างลงในตาราง:
var row = otable.insertrow (-1);
var cell = document.createElement ("TD");
cell.innerhtml = "";
cell.className = "xxxx";
row.appendchild (เซลล์);

[หมายเหตุ] เนื่องจากฉันไม่ค่อยใช้ JS ในการใช้งานตารางโดยตรงฉันไม่เคยพบปัญหานี้เลย ขอแนะนำให้ใช้ชุด JS Framework เพื่อจัดการกับตารางเช่น jQuery

21. เมื่อปัญหาการเยื้องของ UL และ OL ถูกกำจัดออกไปสไตล์ควรเขียนเป็น: รายการสไตล์: ไม่มี;
แอตทริบิวต์มาร์จิ้นนั้นใช้ได้สำหรับ IE และแอตทริบิวต์การขยายนั้นใช้ได้กับ Firefox ←ประโยคนี้ไม่ถูกต้องดูรายละเอียด↓
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการตรวจสอบจริงและจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] พิสูจน์แล้วว่าใน IE การตั้งค่ามาร์จิ้น: 0PX สามารถลบการเยื้องขึ้น, ลง, ซ้ายและขวา, ว่าง, หมายเลขรายการหรือจุดของรายการ, และการตั้งค่าการตั้งค่าไม่มีผลต่อสไตล์; 0PX สามารถลบพื้นที่ว่างขึ้นและลงได้เท่านั้นสามารถลบการเยื้องซ้ายและขวาได้หลังจากตั้งค่าการเติม: 0px กล่าวอีกนัยหนึ่งใน IE คุณสามารถบรรลุเอฟเฟกต์สุดท้ายได้โดยเพียงแค่การตั้งค่ามาร์จิ้น: 0PX, การตอบสนอง: 0PX และสไตล์รายการ: ไม่มีการตั้งค่าในเวลาเดียวกันใน Firefox เพื่อให้ได้เอฟเฟกต์สุดท้าย

22. ปัญหาความโปร่งใส CSS เช่น: ตัวกรอง: progid: dximagetransform.microsoft.alpha (style = 0, opacity = 60)
FF: ความทึบ: 0.6
[หมายเหตุ] เป็นการดีที่สุดที่จะเขียนทั้งสองและวางแอตทริบิวต์ความทึบด้านล่าง

23. CSS ปัญหามุมโค้งมนเช่น: รุ่นต่อไปนี้ของ IE7 ไม่รองรับมุมโค้งมน
FF: -moz-Border-Radius: 4px หรือ -moz-Border-Radius-Topleft: 4px; - รัศมี- ด้านล่าง: 4px;
[หมายเหตุ] ปัญหามุมโค้งมนเป็นปัญหาคลาสสิกใน CSS

มีคำถามมากมายเกี่ยวกับ CSS และแม้แต่คำจำกัดความ CSS เดียวกันก็มีเอฟเฟกต์การแสดงผลที่แตกต่างกันในมาตรฐานหน้าต่างๆ ข้อเสนอแนะที่เหมาะสมคือหน้าเขียนในมาตรฐาน DHTML มาตรฐานและการใช้ตารางไม่ค่อยมีการใช้งาน โอเปร่ายังถูกนำมาพิจารณา ในหลายกรณี BTW มาตรฐานการตีความ CSS ของ FF และ Opera นั้นใกล้เคียงกับมาตรฐาน CSS มากขึ้นและมีมาตรฐานมากขึ้น