บทความนี้สรุปปัญหาความเข้ากันได้ระหว่าง CSS และ JavaScript ในตัวอย่างจำนวนมาก แบ่งปันสำหรับการอ้างอิงของคุณ สรุปเฉพาะมีดังนี้:
1. ความเข้ากันได้สไตล์ CSS
1. ลอยลอยลอย
เว็บเพจนั้นไม่ตรงกับเบราว์เซอร์บางตัวบ่อยครั้งเนื่องจากการใช้ลอยและไม่ปิดจริง ๆ ซึ่งเป็นเหตุผลว่าทำไม DIV ไม่สามารถปรับให้เข้ากับความสูงได้ หากผู้ปกครองไม่ได้ตั้งค่าลอยตัว แต่ลูกของมันมีลอยตัวผู้ปกครอง DIV จะไม่สามารถครอบคลุม div เด็กทั้งหมดได้ สถานการณ์นี้โดยทั่วไปจะเกิดขึ้นเมื่อผู้ปกครอง DIV มีเด็กหลายคน สารละลาย:
1) ตั้งค่าลอยสำหรับผู้ปกครอง div
2) เพิ่ม div ที่ว่างเปล่าหลังจาก subdivs ทั้งหมด (นี่คือสิ่งที่ Ext ทำในปัจจุบัน) ตัวอย่างเช่น:
.parent {Width: 100px;}. son1 {float: ซ้าย; ความกว้าง: 20px;}. son2 {float: ซ้าย; ความกว้าง: 80px;}. ชัดเจน {ล้าง: ทั้งสอง;3) สากลลอยปิด
เพิ่มรหัสต่อไปนี้ลงใน Global CSS และเพิ่ม class = "clearfix" ลงใน div ที่ต้องปิดซึ่งได้รับการลองและทำ
<style>/* Clear Fix*/. Clearfix: หลังจาก {เนื้อหา: "."; display: block; ความสูง: 0; Clear: ทั้งสอง; การมองเห็น: ซ่อน;}. Clearfix {display: inline-block;}/* ซ่อนจาก Mac /*/.clearfix {display: block;}/*: หลังจาก (วัตถุหลอก) ตั้งค่าเนื้อหาที่เกิดขึ้นหลังจากวัตถุมักใช้ร่วมกับเนื้อหา IE ไม่รองรับวัตถุหลอกนี้และไม่ได้รับการสนับสนุนจากเบราว์เซอร์เช่นดังนั้นจึงไม่ส่งผลกระทบต่อเบราว์เซอร์ IE/Win นี่เป็นปัญหามากที่สุด
4) ล้น: อัตโนมัติ
เพียงเพิ่มล้น: อัตโนมัติไปยัง CSS ของ Div Parent ตัวอย่างเช่น:
.parent {Width: 100px; overflow: auto} .SON1 {float: ซ้าย; width: 20px;}. son2 {float: ซ้าย; ความกว้าง: 80px;} <div> <div> </div>หลักการคือเหตุผลที่องค์ประกอบต่อพ่วงไม่สามารถขยายได้ดีอยู่ในการล้นเพราะล้นมองไม่เห็น (ดูคำอธิบายของ W3C) ตอนนี้เพียงเพิ่ม "ล้น: อัตโนมัติ" ลงในองค์ประกอบอุปกรณ์ต่อพ่วงและผลลัพธ์ก็คือมันสามารถแก้ไขได้จริงยกเว้น IE ต่อไปเราต้องแก้ปัญหา IE การเพิ่ม "_height: 1%" จะแก้ปัญหานี้ได้อย่างสมบูรณ์ ฉันลองแล้ว แต่ก็โอเคที่จะเพิ่ม "_height: 1%" ภายใต้ IE ดังนั้นให้เก็บไว้
2. ตัดพจนานุกรม
.hh {-o-text-overflow: Ellipsis; text-overflow: Ellipsis; Space White: NowRap; Overflow: Hidden;}ซึ่งหมายความว่าหลังจากเกินความยาวข้อความพิเศษจะถูกตัดออกไปด้วยตัวเองและจบลงด้วยจุดไข่ปลา เทคโนโลยีเป็นเทคโนโลยีที่ดีและหลายคนชอบที่จะใช้แบบสุ่ม แต่โปรดทราบว่า Firefox ไม่รองรับ
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = 7" />
การเพิ่มประโยคนี้ลงในหน้าสามารถทำให้หน้าเข้ากันได้กับ IE7
สำหรับการอ้างอิง! ฉันอยากจะเตือนคุณเกี่ยวกับปัญหาลอยตัว ให้ความสนใจกับการตั้งค่าความกว้างและความสูงของ DIV ให้ความสนใจกับการตั้งค่าล้น: ซ่อน; ให้ความสนใจกับการปิดจอแสดงผล: Inline-Block สำหรับ Firefox Parent Div Styles;
3. เคอร์เซอร์: มือและเคอร์เซอร์: ตัวชี้
Firefox ไม่รองรับมือ แต่เช่นสนับสนุนตัวชี้
วิธีแก้ปัญหา: ใช้ตัวชี้อย่างสม่ำเสมอ
4. CSS โปร่งใส
เบราว์เซอร์หลายแห่งรองรับความโปร่งใสในรูปแบบที่แตกต่างกัน เพื่อให้แน่ใจว่าเอฟเฟกต์ความโปร่งใสสามารถแสดงได้ตามปกติในเบราว์เซอร์กระแสหลักเช่น IE, Firefox, Chrome, Safari ฯลฯ เราสามารถกำหนดคลาสความโปร่งใสได้เพราะคุณต้องเขียน 3 รายการทันทีที่คุณเขียน
รหัสเฉพาะมีดังนี้:
.transparent {ตัวกรอง: alpha (opacity = 60); /*สนับสนุน IE BROWSER*/-MOZ-OPACITY: 0.6; /*รองรับเบราว์เซอร์ Firefox*/Opacity: 0.6; /*สนับสนุน Chrome, Opera, Safari และเบราว์เซอร์อื่น ๆ*/}5. ความกว้างและช่องว่างใน CSS
ใน IE7 และ FF ความกว้างความกว้างไม่รวมถึงการขยาย แต่ใน IE6
2. ความเข้ากันได้ของ JavaScript
1. เด็กและเด็ก ๆ
มีความแตกต่างในพฤติกรรมของเด็กเด็กและเด็ก ๆ ภายใต้ Firefox ที่จัดทำโดย IE เด็ก ๆ ที่อยู่ภายใต้ Firefox จะนับทั้งตัวแบ่งบรรทัดและตัวละครช่องว่างในฐานะเด็กของโหนดแม่ในขณะที่เด็ก ๆ และลูกของ IE จะไม่ ตัวอย่างเช่น:
<div id = "dd">
<div> yizhu2000 </div>
</div>
div ที่มี ID DD ถูกดูด้วยเด็กภายใต้ IE จำนวนเด็กคือ 1 และสามภายใต้ FF เราสามารถเห็นได้จากผู้ชม DOM ของ Firefox ว่าเด็กของมันคือ ["/n", div, "/n"]
เพื่อจำลองคุณสมบัติของเด็กภายใต้ Firefox เราสามารถทำได้:
if (typeof (htmlelement)! = "undefined" &&! window.opera) {htmlelement.prototype .__ definegetter __ ("เด็ก", ฟังก์ชั่น () {สำหรับ (var a = [], j = 0, n, i = 0; i <this.childnodes.length; == 1) {a [j ++] = n;2. เหตุการณ์ Firefox และ IE
Window.event สามารถใช้งานได้ใน IE เท่านั้นไม่ใช่ใน Firefox เนื่องจากเหตุการณ์ Firefox สามารถใช้ได้เฉพาะในฉากที่เกิดเหตุการณ์ Firefox ต้องเพิ่มเหตุการณ์จากแหล่งที่มาสำหรับพารามิเตอร์ที่ผ่าน IE ละเว้นพารามิเตอร์นี้และใช้หน้าต่างเพื่ออ่านเหตุการณ์
ตัวอย่างเช่นวิธีการต่อไปนี้เพื่อให้ได้ตำแหน่งเมาส์ภายใต้ IE:
<button onclick = "onclick ()"> รับพิกัดแนวนอนของเมาส์คลิก </button> <script type = "text/javascript"> function onclick () {Alert (Event.Clientx);} </script>ต้องเปลี่ยนเป็น
<ปุ่ม onclick = "onclick (event)"> รับ outerhtml </button> <script type = "text/javascript"> ฟังก์ชั่น onclick (เหตุการณ์) {event = event || window.event; Alert (Event.Clientx);} </script>ใช้เฉพาะในเบราว์เซอร์ทั้งสอง
3. ปัญหาการได้มาของวัตถุ HTML
Firefox Get Method Document.getElementById ("Idname")
IE ใช้ document.idname หรือ document.getElementById ("idname")
วิธีแก้ปัญหา: ใช้ document.getElementById ("idname");
4. ปัญหา Const
ใน Firefox คุณสามารถใช้คำหลัก const หรือคำหลัก VAR เพื่อกำหนดค่าคงที่
ใน IE คุณสามารถใช้คำหลัก VAR เพื่อกำหนดค่าคงที่เท่านั้น
วิธีแก้ปัญหา: ใช้คำหลัก VAR เพื่อกำหนดค่าคงที่
5. ปัญหาเฟรม
เฟรมต่อไปนี้เป็นตัวอย่าง:
<frame src = "xxx.html" id = "frameid" name = "framename" />
a) วัตถุเฟรมเข้าถึง
IE: ใช้ window.frameId หรือ window.frameName เพื่อเข้าถึงวัตถุเฟรมนี้ frameId และ framename สามารถมีชื่อเดียวกัน;
Firefox: Window.framename เท่านั้นที่สามารถใช้ในการเข้าถึงวัตถุเฟรมนี้;
นอกจากนี้ทั้งใน IE และ Firefox คุณสามารถใช้ window.document.getElementById ("frameid") เพื่อเข้าถึงวัตถุเฟรมนี้
b) สลับเนื้อหาเฟรม
ในทั้ง IE และ Firefox คุณสามารถใช้ window.document.getElementById ("testFrame"). src = "xxx.html" หรือ window.frameName.location = "xxx.html" เพื่อสลับเนื้อหาของเฟรม;
หากคุณต้องการส่งพารามิเตอร์ในเฟรมกลับไปที่หน้าต่างหลัก (โปรดทราบว่าไม่ใช่ตัวเปิด แต่เป็นพาเรนต์) คุณสามารถใช้พาเรนต์ในเฟรมเพื่อเข้าถึงหน้าต่างพาเรนต์ ตัวอย่างเช่น:
parent.document.form1.filename.value = "aqing";
6. ปัญหาร่างกาย
ร่างกายของ Firefox มีอยู่ก่อนที่แท็กร่างกายจะอ่านโดยเบราว์เซอร์อย่างเต็มที่ ในขณะที่ร่างกายของ IE จะต้องมีอยู่หลังจากแท็กร่างกายถูกอ่านอย่างเต็มที่โดยเบราว์เซอร์
7. ความแตกต่างระหว่าง Firefox และองค์ประกอบหลักคือ (parentelement)
เช่น: obj.parentelement
Firefox: obj.parentnode
วิธีแก้ปัญหา: เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM ทั้งหมดใช้ obj.parentNode
8. ปัญหา InnerText
InnerText ใช้งานได้ตามปกติใน IE แต่ InnerText ไม่ทำงานใน Firefox จำเป็นต้องใช้ textContent;
สารละลาย:
if (navigator.appname.indexof ("Explorer")> -1) {document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน";} else {document.getElementById ('องค์ประกอบ'). textContent = "ข้อความของฉัน";9. ความแตกต่างระหว่าง AJAX รับ XMLHTTP
var xmlhttp; if (window.xmlhttpRequest) {xmlhttp = ใหม่ xmlhttprequest ();} elle.elf (window.activexobject) {// วิธีการซื้อ xmlhttp = new ActiveXobject ("microsoft.xmlhtp");หมายเหตุ: ใน IE เนื้อหาของวิธี XMLHTTP.Send (เนื้อหา) สามารถว่างเปล่าในขณะที่ Firefox ไม่สามารถเป็นโมฆะได้ ควรส่ง ("") มิฉะนั้นจะเกิดข้อผิดพลาด 411
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน