มักจะมีปัญหาความไม่เข้ากันมากมายระหว่าง IE และ FF ในรูปแบบหน้าเว็บ CSS ต่อไปนี้คือความเป็นไปได้ทั่วไปและแนวทางแก้ไข!
1. ใช้ !important เพื่อแก้ไขความแตกต่างระหว่าง IE และ Mozilla !important คือไวยากรณ์ที่กำหนดไว้ใน CSS1 หน้าที่ของมันคือการเพิ่มลำดับความสำคัญของแอปพลิเคชันของกฎสไตล์ที่ระบุ จุดที่สำคัญที่สุดคือ IE ไม่เคยรองรับไวยากรณ์นี้ แต่เบราว์เซอร์อื่นรองรับ ดังนั้นเราจึงสามารถใช้สิ่งนี้เพื่อกำหนดสไตล์ที่แตกต่างกันสำหรับ IE และเบราว์เซอร์อื่น ๆ ตัวอย่างเช่น เรากำหนดสไตล์ดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] .colortest{
เส้นขอบ:20pxsolid#60A179!สำคัญ;
เส้นขอบ:20pxsolid#00F;
ช่องว่างภายใน:30px;
ความกว้าง:300px;
-
เมื่อเรียกดูใน Mozilla จะสามารถเข้าใจลำดับความสำคัญของ !important ได้ ดังนั้นสี #60A179 จะแสดงขึ้นมา เมื่อเรียกดูใน IE จะไม่สามารถเข้าใจลำดับความสำคัญของ !important ได้ ดังนั้นสี #00F จะปรากฏขึ้น
2. แก้ไขปัญหาที่รูปแบบโฮเวอร์ไม่แสดงหลังจากเข้าถึงไฮเปอร์ลิงก์ เปลี่ยนลำดับของคุณสมบัติ CSS: มาตรฐานการสั่งซื้อควรเป็น:
a:link—a:visited—a:hover—a:active
3. วิธีแสดงเนื้อหาใน Li ด้วยจุดไข่ปลาหลังจากเนื้อหาเกินความยาว ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <meta content="text/html; charset=gb2312" http-equiv="ประเภทเนื้อหา" />
<style type="text/css">
-
ลี่ {
ความกว้าง:200px;
พื้นที่สีขาว: nowrap;
ข้อความล้น: จุดไข่ปลา;
-o-ข้อความล้น:จุดไข่ปลา;
ล้น: ซ่อนเร้น;}
--></สไตล์>
<ul>
<li><a href="#">การออกแบบเว็บ CSS ฉันชอบ CSS-Web Standardization - www.52CSS.com</a></li>
<li><a href="#">คำถามที่พบบ่อยเกี่ยวกับมาตรฐานเว็บ - www.downcodes.com</a></li>
</ul>
Margin:3px - หมายความว่าทุกด้านเป็น 3px;
Margin:3px 5px - หมายความว่าค่าของด้านบนและด้านล่างคือ 3px และค่าของด้านขวาและด้านซ้ายคือ 5px
Margin:3px 5px 7px——แสดงว่าค่าบนคือ 3 ค่าขวาและซ้ายคือ 5 และค่าล่างคือ 7
ระยะขอบ: 3px 5px 7px 5px - ค่าสี่ค่าแสดงถึงด้านบน, ขวา, ล่าง, ซ้าย; บน, ขวา, ล่างและซ้าย
5. แก้ไขปัญหาที่ IE ไม่สามารถแสดง PNG แบบโปร่งใสได้อย่างถูกต้อง - เพิ่มโค้ดในส่วนหัว ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่นถูกต้อง PNG()
-
สำหรับ (var i=0; i<document.images.length; i++)
-
var img = document.images[i]
var imgName = img.src.toUpperCase()
ถ้า (imgName.substring(imgName.length-3, imgName.length) == "PNG")
-
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
ถ้า (img.align == "ซ้าย") imgStyle = "float:left;"
ถ้า (img.align == "right") imgStyle = "float:right;"
ถ้า (img.parentElement.href) imgStyle = "cursor:hand;"
var strNewHTML = "<span" + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "ตัวกรอง: progid: DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
ฉัน = i-1
-
-
-
window.attachEvent("onload", แก้ไข PNG);
</สคริปต์>
ใช้ (padding:0; Margin:0; list-style:inside;)
หรือ (padding:0; Margin:0; list-style:none;) เพื่อให้เกิดความเข้ากันได้
7. วิธีแก้ไขความแตกต่าง 2px ในการตีความโมเดล BOX ใน Firefox และ IE ตัวอย่างซอร์สโค้ด
[www.downcodes.com] div{
ขอบ:30px!สำคัญ;
ระยะขอบ:28px;
-
โปรดทราบว่าลำดับของระยะขอบทั้งสองนี้จะต้องไม่กลับรายการ ตามที่กล่าวมาข้างต้น IE ไม่รองรับ !important ดังนั้นจึงถูกตีความเช่นนี้ภายใต้ IE:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] div{
การเดินทะเล:30px;
ระยะขอบ:28px
-
หากมีคำจำกัดความซ้ำกัน คำจำกัดความสุดท้ายจะถูกดำเนินการ ดังนั้นคุณจึงไม่สามารถเขียนแค่ Margin:XXpx!important;
8. ผลกระทบเริ่มต้นของมาร์จิ้น เนื้อหาใน div จะอยู่ตรงกลางตามค่าเริ่มต้นใน IE และจัดชิดซ้ายใน FF ตามค่าเริ่มต้น วิธีจัดเนื้อหา ff ให้อยู่ตรงกลางคือการเพิ่มโค้ด Margin:auto;
