การรวบรวมเคล็ดลับความเข้ากันได้ของ CSS สำหรับเบราว์เซอร์ IE และ Firefox

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-01-02 18:00:01

เคล็ดลับทั่วไปเกี่ยวกับความเข้ากันได้ของ CSS

โปรดลองเขียนโค้ดในรูปแบบ xhtml และ DOCTYPE จะส่งผลต่อการประมวลผล CSS ตามมาตรฐาน W3C จะต้องเพิ่มคำสั่ง DOCTYPE

1.ปัญหาการจัดกึ่งกลางแนวตั้งของ div

Vertical-align:middle; เพิ่มระยะห่างบรรทัดให้มีความสูงเท่ากับ DIV line-height:200px ทั้งหมด จากนั้นแทรกข้อความและข้อความจะอยู่ตรงกลางในแนวตั้ง ข้อเสียคือคุณต้องควบคุมเนื้อหาและไม่ตัดเป็นบรรทัดอื่น

2. ปัญหาการเพิ่มมาร์จิ้นเป็นสองเท่า

ระยะขอบที่ตั้งไว้สำหรับชุด div ให้ลอยจะเพิ่มขึ้นสองเท่าภายใต้ IE นี่เป็นข้อผิดพลาดที่มีอยู่ใน ie6 วิธีแก้ไขคือเพิ่ม display:inline; ภายใน div นี้

ตัวอย่างเช่น:

<#div id=”imfloat”>
CSS ที่เกี่ยวข้องคือ #imfloat{
ลอย:ซ้าย;
Margin:5px;/*ภายใต้ IE จะเข้าใจว่าเป็น 10px*/
display:inline;/*ภายใต้ IE จะเข้าใจว่าเป็น 5px*/}

3. ระยะทางสองเท่าที่เกิดจากการลอยตัว เช่น

#box{ float:left; width:100px; margin:0 0 0 100px; // ในกรณีนี้ IE จะสร้างระยะทาง 200px display:inline;

เรามาพูดถึงรายละเอียดเกี่ยวกับบล็อกองค์ประกอบทั้งสองและแบบอินไลน์กัน: คุณลักษณะขององค์ประกอบบล็อกคือองค์ประกอบนั้นจะเริ่มต้นด้วยบรรทัดใหม่เสมอ และสามารถควบคุมความสูง ความกว้าง ความสูงของเส้น และระยะขอบได้ (องค์ประกอบบล็อก) ขององค์ประกอบอินไลน์คือสิ่งนั้น และองค์ประกอบอื่นๆ อยู่ในบรรทัดเดียวกันและไม่สามารถควบคุมได้ (องค์ประกอบอินไลน์)

#box{ display:block; //สามารถจำลององค์ประกอบแบบอินไลน์เป็นองค์ประกอบบล็อก display:inline; //บรรลุผลจากการจัดเรียงในไดเพลย์แถวเดียวกัน:ตาราง;

4 ปัญหา IE เกี่ยวกับความกว้างและความสูง

IE ไม่รู้จักคำจำกัดความของ min- แต่ในความเป็นจริงแล้ว IE ถือว่าความกว้างและความสูงปกติเหมือนกับว่ามี min- นี่เป็นปัญหาใหญ่ หากคุณใช้เพียง width และ height ค่าทั้งสองนี้จะไม่เปลี่ยนแปลงในเบราว์เซอร์ปกติ หากคุณใช้เพียง min-width และ min-height ความกว้างและความสูงจะไม่ถูกตั้งค่าเลย ภายใต้ IE

เช่น หากคุณต้องการตั้งค่าภาพพื้นหลัง ความกว้างนี้จะมีความสำคัญมากกว่า เพื่อแก้ไขปัญหานี้ คุณสามารถทำได้:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;

5. ความกว้างขั้นต่ำของหน้า

min-width เป็นคำสั่ง CSS ที่สะดวกมาก ซึ่งสามารถระบุได้ว่าความกว้างขั้นต่ำขององค์ประกอบต้องไม่เล็กกว่าความกว้างที่กำหนด เพื่อให้เลย์เอาต์ถูกต้องเสมอ แต่ IE ไม่รู้จักสิ่งนี้ และจริงๆ แล้วถือว่าความกว้างเป็นความกว้างขั้นต่ำ เพื่อให้คำสั่งนี้พร้อมใช้งานบน IE คุณสามารถใส่ <div> ใต้แท็ก <body> จากนั้นระบุคลาสสำหรับ div จากนั้นออกแบบ CSS ดังนี้:

#container{ ความกว้างขั้นต่ำ: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

ความกว้างขั้นต่ำอันแรกเป็นเรื่องปกติ แต่ความกว้างในบรรทัดที่สองใช้จาวาสคริปต์ ซึ่ง IE เท่านั้นที่รู้จัก ซึ่งจะทำให้เอกสาร HTML ของคุณเป็นทางการน้อยลงด้วย จริงๆ แล้วใช้ความกว้างขั้นต่ำผ่านการตัดสิน Javascript

6. ข้อความ IE แบบลอยตัวของ DIV ทำให้เกิดข้อผิดพลาด 3 พิกเซล

วัตถุทางด้านซ้ายลอยอยู่ และตำแหน่งทางขวาโดยใช้ระยะขอบด้านซ้ายของแพทช์ด้านนอก ข้อความภายในวัตถุทางด้านขวาจะเว้นระยะห่าง 3px จากด้านซ้าย

#box {ลอย: ซ้าย; ความกว้าง: 800px;}
#left{ ลอย:ซ้าย; ความกว้าง:50%;}
#ขวา{ ความกว้าง:50%;}
*html #left{ margin-right:-3px; //ประโยคนี้คือกุญแจสำคัญ}
<div id="กล่อง">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE ปัญหาซ่อนหา

เมื่อแอปพลิเคชัน div ซับซ้อน จะมีลิงก์บางส่วนในแต่ละคอลัมน์ และปัญหาการซ่อนหาอาจเกิดขึ้นได้ง่ายใน DIV

ไม่สามารถแสดงเนื้อหาบางส่วนได้ เมื่อเมาส์เลือกบริเวณนี้ จะพบว่าเนื้อหานั้นอยู่ในหน้านั้นจริงๆ วิธีแก้ไข: ใช้แอตทริบิวต์ line-height สำหรับ #layout หรือใช้ความสูงและความกว้างคงที่สำหรับ #layout รักษาโครงสร้างหน้าให้เรียบง่ายที่สุด

8. div ลอยปิด ความสูงแบบปรับได้ชัดเจน

`ตัวอย่าง: ＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >NOTfloatC ที่นี่ไม่ต้องการแปลต่อ แต่ต้องการจัดเรียงลงด้านล่าง . (คุณสมบัติของ floatA และ floatB ได้รับการตั้งค่าเป็น float:left;)

รหัสนี้ทำงานได้ดีใน IE ปัญหาอยู่ที่ FF เหตุผลก็คือ NOTfloatC ไม่ใช่ป้ายกำกับ float และต้องปิดป้ายกำกับ float เพิ่ม <#div class=”clear”> ระหว่าง <#div class=”floatB”> <#div class=”NOTfloatC”> two ไม่สามารถมีความสัมพันธ์แบบซ้อนระหว่าง div ในระดับเดียวกันได้ มิฉะนั้นจะเกิดข้อยกเว้นขึ้น และกำหนดรูปแบบที่ชัดเจนดังนี้ .clear{ clear:both;}

② อย่าตั้งค่าความสูงของ div เป็น wrapper ภายนอก เพื่อให้สามารถปรับความสูงได้โดยอัตโนมัติ ให้เพิ่ม overflow:hidden ใน wrapper เมื่อมี float box การปรับความสูงอัตโนมัติจะไม่ถูกต้องภายใต้ IE เวลา IE ควรถูกทริกเกอร์ แอตทริบิวต์ส่วนตัวของเลย์เอาต์ (IE ที่ชั่วร้าย!) สามารถทำได้โดยใช้การซูม: 1; จึงบรรลุความเข้ากันได้
ตัวอย่างเช่น wrapper ถูกกำหนดไว้ดังนี้:

.colwrapper{ ล้น: ซ่อน; ซูม: 1; ระยะขอบ: 5px อัตโนมัติ;}

สำหรับการเรียงพิมพ์ คำอธิบาย CSS ที่เราใช้บ่อยที่สุดน่าจะเป็น float:left บางครั้งเราจำเป็นต้องสร้างพื้นหลังแบบรวมไว้ด้านหลัง float div ในคอลัมน์ n เช่น:

ตัวอย่างเช่น เราต้องการตั้งค่าพื้นหลังของหน้าเป็นสีน้ำเงินเพื่อให้สีพื้นหลังของทั้งสามคอลัมน์เป็นสีน้ำเงิน อย่างไรก็ตาม เราจะพบว่าเมื่อกึ่งกลางด้านซ้ายเหยียดลง หน้าเว็บก็จะยังคงมีความสูงเท่าเดิม สาเหตุก็คือเพจไม่ใช่แอตทริบิวต์ float และเพจของเราไม่สามารถตั้งค่าให้ลอยได้เนื่องจากจำเป็นต้องอยู่ตรงกลาง ดังนั้นเราจึงควรแก้แบบนี้

วิธีแก้ไขคือการฝัง DIV ด้านซ้ายที่มีความกว้าง 100%

④ตัวปิดลูกลอยอเนกประสงค์ (สำคัญมาก!)

สำหรับหลักการของ clear float โปรดดูที่ [วิธีการล้างโฟลตโดยไม่มีมาร์กอัปโครงสร้าง] เพิ่มโค้ดต่อไปนี้ลงใน Global CSS และเพิ่ม class="clearfix" ลงใน div ที่ต้องปิด ซึ่งใช้งานได้ทุกครั้ง

/* ล้างการแก้ไข */
.clearfix:after { เนื้อหา:"; display:block; height:0; clear:both;
.clearfix { จอแสดงผล: อินไลน์บล็อก }
/* ซ่อนจาก IE Mac */
.clearfix {จอแสดงผล:บล็อก;}
/* สิ้นสุดการซ่อนจาก IE Mac */
/* สิ้นสุด clearfix */

หรือตั้งค่าดังนี้: .hackbox{ display:table; //แสดงวัตถุเป็นตารางระดับองค์ประกอบบล็อก}

9. ไม่สามารถปรับความสูงได้

ความสูงที่ไม่สามารถปรับได้หมายความว่าความสูงภายนอกจะไม่สามารถปรับได้โดยอัตโนมัติเมื่อความสูงของวัตถุภายในเปลี่ยนแปลง โดยเฉพาะอย่างยิ่งเมื่อวัตถุภายในใช้ระยะขอบหรือช่องว่างภายใน

ตัวอย่าง:

#box {สีพื้นหลัง:#eee;
#box p {ระยะขอบบน: 20px;
<div id="กล่อง">
<p>เนื้อหาในวัตถุ p</p>
</div>

วิธีแก้ไข: เพิ่มวัตถุ div ว่างสองตัวด้านบนและด้านล่างของวัตถุ P โค้ด CSS: .1{height:0px;overflow:hidden;} หรือเพิ่มแอตทริบิวต์เส้นขอบให้กับ DIV

10.เหตุใดจึงมีช่องว่างใต้ภาพภายใต้ IE6?

มีเทคนิคมากมายในการแก้ไขข้อบกพร่องนี้ คุณสามารถเปลี่ยนเค้าโครงของ html หรือตั้งค่า img ให้แสดง:บล็อก หรือตั้งค่าแอตทริบิวต์การจัดแนวแนวตั้งเป็นแนวตั้ง:ด้านบน

ข้อความกลางล่าง-ล่างสามารถแก้ไขได้

11. วิธีจัดแนวข้อความให้ตรงกับช่องป้อนข้อความ

เพิ่มการจัดแนวตั้ง: กลาง;

12. มีความแตกต่างระหว่าง id และคลาสที่กำหนดในมาตรฐานเว็บหรือไม่?

(1) มาตรฐานเว็บไม่อนุญาตให้มีรหัสซ้ำ ตัวอย่างเช่น div id="aa" ไม่ได้รับอนุญาตให้ทำซ้ำสองครั้ง และคลาสจะกำหนดคลาสหนึ่งๆ เขาสามารถใช้ข้อมูลอ้างอิงได้

(2) ปัญหาลำดับความสำคัญของคุณลักษณะ

ID มีลำดับความสำคัญสูงกว่าคลาส ดูตัวอย่างด้านบน

(3) สะดวกสำหรับสคริปต์ไคลเอนต์ เช่น JS หากคุณต้องการดำเนินการกับสคริปต์บนออบเจ็กต์ในเพจ คุณสามารถกำหนด ID ให้กับมันได้ มิฉะนั้น คุณสามารถค้นหาได้โดยการสำรวจองค์ประกอบของเพจและระบุเท่านั้น คุณลักษณะเฉพาะ นี่คือการเสียเวลาและทรัพยากรค่อนข้างมาก แต่ง่ายกว่า ID มาก

13. เคล็ดลับในการแสดงเนื้อหาใน LI โดยมีจุดไข่ปลาหลังจากมีความยาวเกิน

เทคนิคนี้ใช้ได้กับเบราว์เซอร์ IE และ OP

-
</สไตล์>

14. เหตุใด IE จึงไม่สามารถตั้งค่าสีแถบเลื่อนตามมาตรฐานเว็บได้?

วิธีแก้ไขคือการแทนที่เนื้อหาด้วย html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
-
HTML {
แถบเลื่อนสีหน้า:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
แถบเลื่อน-ลูกศร-สี:#000;
แถบเลื่อนติดตามสี: #fff;
แถบเลื่อน-darkshadow-สี:#fff;
-
-
＜/สไตล์>

15. เหตุใดฉันจึงไม่สามารถกำหนดคอนเทนเนอร์ที่มีความสูงประมาณ 1px ได้

ปัญหานี้ภายใต้ IE6 เกิดจากความสูงของแถวเริ่มต้น และมีเทคนิคการแก้ปัญหามากมาย เช่น:
ล้น: ซูมที่ซ่อนอยู่: 0.08 ความสูงบรรทัด: 1px

16. จะทำให้เลเยอร์แสดงบน Flash ได้อย่างไร?

วิธีแก้ไขคือการตั้งค่าความโปร่งใสสำหรับ FLASH

<ชื่อพารามิเตอร์ =ค่า wmode = "โปร่งใส" />

17. วิธีจัดกึ่งกลางเลเยอร์ในแนวตั้งในเบราว์เซอร์

ที่นี่เราใช้การวางตำแหน่งแบบสัมบูรณ์เป็นเปอร์เซ็นต์ และเทคนิคการใช้ค่าลบนอกแพตช์ ขนาดของค่าลบคือความกว้างและความสูงของตัวเองหารด้วยสอง

เคล็ดลับความเข้ากันได้ของ CSS สำหรับ Firefox และ IE

1. ปัญหาการตั้งศูนย์ Div

div อยู่กึ่งกลางแล้วเมื่อตั้งค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ สิ่งนี้ใช้ไม่ได้กับ IE จำเป็นต้องตั้งค่าเนื้อหาให้อยู่กึ่งกลาง ขั้นแรกให้กำหนด text-algin: center ในองค์ประกอบหลัก เนื้อหาภายในองค์ประกอบหลักจะอยู่ตรงกลาง

2. เส้นขอบและพื้นหลังของลิงก์ (แท็ก)

หากต้องการเพิ่มเส้นขอบและสีพื้นหลังให้กับลิงก์ คุณต้องตั้งค่า display: block และ float: left เพื่อให้แน่ใจว่าไม่มีการขึ้นบรรทัด อ้างถึงแถบเมนู การตั้งค่าความสูงของ a และแถบเมนูเพื่อหลีกเลี่ยงการคลาดเคลื่อนของการแสดงขอบด้านล่าง หากไม่ได้ตั้งค่าความสูง สามารถแทรกช่องว่างในแถบเมนูได้

3. ปัญหาที่สไตล์โฮเวอร์ไม่ปรากฏหลังจากเข้าถึงไฮเปอร์ลิงก์

รูปแบบไฮเปอร์ลิงก์ที่ถูกคลิกและเข้าชมไม่มีโฮเวอร์และใช้งานอยู่อีกต่อไป หลายคนคงประสบปัญหานี้ วิธีแก้ไขคือเปลี่ยนลำดับของแอตทริบิวต์ CSS: LVHA

รหัส:

4. เคอร์เซอร์นิ้วเคอร์เซอร์

เคอร์เซอร์: ตัวชี้สามารถแสดงรูปร่างนิ้วเคอร์เซอร์ใน IE FF ในเวลาเดียวกัน มือสามารถแสดงได้ใน IE เท่านั้น

5. ช่องว่างภายในและระยะขอบของ UL

แท็ก ul มีค่าช่องว่างภายในตามค่าเริ่มต้นใน FF แต่ใน IE มีเพียงระยะขอบเท่านั้นที่มีค่าตามค่าเริ่มต้น ดังนั้นการกำหนด ul{margin:0;padding:0;} ก่อนจึงจะสามารถแก้ไขปัญหาส่วนใหญ่ได้

6. แท็กแบบฟอร์ม

ป้ายกำกับนี้จะมีระยะขอบใน IE โดยอัตโนมัติ ในขณะที่ FF ระยะขอบจะเป็น 0 ดังนั้น หากคุณต้องการแสดงอย่างสม่ำเสมอ วิธีที่ดีที่สุดคือระบุระยะขอบและช่องว่างภายในใน css เพื่อแก้ไขปัญหาสองข้อข้างต้น โดยทั่วไปแล้ว css ของฉัน , style ul, form{margin:0;padding:0;} ถูกกำหนดไว้ก่อน ดังนั้นคุณจะไม่ปวดหัวในภายหลัง

7. คำอธิบายโมเดล BOX ปัญหาความไม่สอดคล้องกัน

การตีความโมเดล BOX ใน FF และ IE ไม่สอดคล้องกัน ส่งผลให้เกิดความแตกต่าง 2px คำแนะนำในการแก้ปัญหา: div{margin:30px!important;margin:28px;} โปรดทราบว่าลำดับของระยะขอบทั้งสองจะต้องไม่กลับกัน คุณลักษณะที่สำคัญ แต่เบราว์เซอร์ไม่สามารถจดจำได้ ดังนั้นภายใต้ IE จึงมีการตีความเช่นนี้:

หากมีการกำหนด div{maring:30px;margin:28px} ซ้ำๆ รายการสุดท้ายจะถูกดำเนินการ ดังนั้นคุณจึงไม่สามารถเขียนได้เฉพาะ Margin:xx px!important;#box{ width:600px; idth:500px ; //สำหรับ ff+ie6.0}
#box{ width:600px!important //สำหรับความกว้าง ff:600px; //สำหรับความกว้าง ff+ie6.0 /**/:500px; //สำหรับ ie6.0-}

8. ตัวเลือกแอตทริบิวต์ (ไม่สามารถถือว่าเข้ากันได้ มันเป็นข้อผิดพลาดในการซ่อน CSS)

พี[id]{}div[id]{}

สิ่งนี้ถูกซ่อนไว้สำหรับ IE6.0 และเวอร์ชันที่ต่ำกว่า IE6.0 และใช้งานได้ใน FF และ Opera ยังคงมีความแตกต่างระหว่างตัวเลือกแอตทริบิวต์และตัวเลือกย่อย ตัวเลือกมีขนาดค่อนข้างใหญ่ เช่น p[id] แท็ก p ทั้งหมดที่มี id มีลักษณะเหมือนกัน

9. วิธีที่โหดเหี้ยมที่สุด - !สำคัญ

หากไม่มีวิธีแก้ไขปัญหาโดยละเอียด คุณสามารถใช้เทคนิคนี้ได้ FF จะแยกวิเคราะห์ "!important" โดยอัตโนมัติก่อน แต่ IE จะเพิกเฉยดังต่อไปนี้

.tabd1{
พื้นหลัง:url(/res/images/up/tab1.gif) ไม่ซ้ำ 0px 0px !important;
พื้นหลัง: url(/res/images/up/tab1.gif) ไม่ซ้ำ 1px 0px; /* สไตล์สำหรับ IE */}

เป็นที่น่าสังเกตว่า xxxx !important ประโยคจะต้องอยู่เหนือประโยคอื่น

10. ปัญหาค่าเริ่มต้นของ IE และ FF

บางทีคุณอาจเคยบ่นว่าทำไมคุณต้องเขียน CSS ที่แตกต่างกันสำหรับ IE และ FF โดยเฉพาะ ทำไม IE ถึงปวดหัวขนาดนี้ แล้วคุณก็สาปแช่ง M$ ไอ้เวรนั่นในขณะที่เขียน CSS IE ในความเป็นจริงในแง่ของการสนับสนุนมาตรฐาน CSS IE ก็ไม่ได้แย่อย่างที่เราคิด สิ่งสำคัญคือค่าเริ่มต้นของ IE และ FF นั้นแตกต่างกัน ที่เข้ากันได้กับ FF และ IE นั้นไม่ใช่เรื่องยาก บางทีสำหรับ CSS ธรรมดาคุณไม่จำเป็นต้องมีสิ่งที่ "!สำคัญ" เลย

เราทุกคนรู้ดีว่าเมื่อเบราว์เซอร์แสดงหน้าเว็บ มันจะตัดสินใจว่าจะแสดงอย่างไรตามสไตล์ชีต css ของหน้าเว็บ แต่เราอาจไม่จำเป็นต้องอธิบายองค์ประกอบทั้งหมดโดยละเอียดในสไตล์ชีต และแน่นอนว่ามี ไม่จำเป็นต้องทำเช่นนั้น ดังนั้น สำหรับคุณสมบัติที่ไม่ได้อธิบายไว้ เบราว์เซอร์จะใช้ค่าเริ่มต้นในตัว วิธีแสดง เช่น ข้อความ หากไม่ได้ระบุสีใน css เบราเซอร์จะใช้สีดำหรือสีของระบบในการแสดง พื้นหลังของ div หรือองค์ประกอบอื่นๆ หากไม่ได้ระบุใน css เบราเซอร์จะตั้งค่าให้ เป็นสีขาวหรือโปร่งใส และลักษณะอื่นๆ ที่ไม่ได้กำหนดไว้จะเหมือนกัน ดังนั้น เหตุผลพื้นฐานว่าทำไมหลายสิ่งจึงแสดงแตกต่างกันระหว่าง FF และ IE ก็คือการแสดงผลเริ่มต้นนั้นแตกต่างกัน สำหรับวิธีการแสดงสไตล์เริ่มต้นนี้ ฉันรู้ว่ามีมาตรฐานที่สอดคล้องกันใน w3 ที่จะกำหนดหรือไม่ ดังนั้นจึงไม่มี จำเป็นต้องแสดงความคิดเห็นในประเด็นนี้ ตำหนิ IE

11. เหตุใดข้อความใน FF จึงไม่สามารถขยายความสูงของคอนเทนเนอร์ได้

คอนเทนเนอร์ที่มีค่าความสูงคงที่ในเบราว์เซอร์มาตรฐานจะไม่ถูกขยายเหมือนใน IE6 ดังนั้นหากฉันต้องการให้มีความสูงคงที่และถูกยืดออก ฉันควรตั้งค่าอย่างไร วิธีแก้ไขคือลบความสูงออกและตั้งค่า min-height:200px; ที่นี่ เพื่อดูแล IE6 ที่ไม่ทราบความสูงขั้นต่ำ สามารถกำหนดได้ดังนี้:

-
ความสูง:อัตโนมัติ!สำคัญ;
ความสูง:200px;
ความสูงขั้นต่ำ: 200px;
-

12. วิธีทำให้เขตข้อมูลยาวต่อเนื่องถูกรวมใน FireFox โดยอัตโนมัติ

ดังที่เราทุกคนทราบกันดีว่าใน IE คุณสามารถใช้ Word-wrap:break-word ได้โดยตรง ใน FF เราใช้เทคนิคการแทรก JS เพื่อแก้ไขปัญหา

<div id="ff">อร๊ายยยยยยยยย</div>

<scrīpt type="text/javascript">
/* <![ซีดีต้า[ */
ฟังก์ชั่น toBreakWord (el, intLen) {
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp = "";
ในขณะที่ (strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
-
strContent=strContent.substr(intLen,strContent.length);
-
strTemp+="
"+strเนื้อหา;
obj.innerHTML=strTemp;
-
ถ้า(document.getElementById && !document.all) toBreakWord("ff", 37);
-
</สคริปต์>

13. เหตุใดความกว้างของคอนเทนเนอร์ภายใต้ IE6 จึงแตกต่างจากความกว้างใน FF?

ความแตกต่างในปัญหาคือความกว้างโดยรวมของคอนเทนเนอร์รวมความกว้างของเส้นขอบหรือไม่ ในที่นี้ IE6 ตีความว่าเป็น 200PX ในขณะที่ FF ตีความว่าเป็น 220PX แล้วอะไรเป็นสาเหตุของปัญหากันแน่ หากคุณลบ xml ที่ด้านบนของคอนเทนเนอร์ คุณจะพบว่าปัญหาเดิมอยู่ที่นี่ คำสั่งที่ด้านบนจะทริกเกอร์โหมด qurks ของ IE

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
-
div {
เคอร์เซอร์:ตัวชี้;
ความกว้าง:200px;
ความสูง:200px;
ขอบ: 10px สีแดงทึบ
-
-
</สไตล์>
<div ōnclick="alert(this.offsetWidth)">ทำให้ FireFox เข้ากันได้กับ IE</div>

มีปัญหาใหม่เกี่ยวกับการรองรับ CSS ของ IE7.0 ซึ่งได้รับการแก้ไขดังนี้

ประเภทแรก CSS HACK

Bpx; /*สำหรับ IE7 และ IE6*/
_height:20px; /*สำหรับ IE6*/

ให้ความสนใจกับการสั่งซื้อ

ต่อไปนี้เป็น CSS HACK เช่นกัน แต่มันไม่ง่ายเหมือนที่กล่าวมาข้างต้น

#ตัวอย่าง { สี: #333; } /* Moz */
* html #example { สี: #666; } /* IE6 */
*+html #example { สี: #999; } /* IE7 */

ประการที่สองคือการใช้ความคิดเห็นแบบมีเงื่อนไขเฉพาะของ IE

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![สิ้นสุด]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![สิ้นสุด]-->

วิธีที่สามคือวิธีกรอง CSS ต่อไปนี้แปลจากเว็บไซต์ต่างประเทศ

สร้างสไตล์ CSS ใหม่ดังต่อไปนี้:

#รายการ {
ความกว้าง: 200px;
ความสูง: 200px;
พื้นหลัง: สีแดง;
-

สร้าง div ใหม่และใช้สไตล์ CSS ที่กำหนดไว้ก่อนหน้านี้:

<div id="item">ข้อความบางส่วนที่นี่</div>

เพิ่มแอตทริบิวต์ lang ที่นี่ในประสิทธิภาพของร่างกาย ภาษาจีนคือ zh:

ตอนนี้กำหนดสไตล์อื่นสำหรับองค์ประกอบ div:

*:lang(en) #item{
พื้นหลัง:สีเขียว !สำคัญ;
-

สิ่งนี้ทำเพื่อเขียนทับสไตล์ css ดั้งเดิมด้วย !important เนื่องจากตัวเลือก :lang ไม่ได้รับการสนับสนุนใน IE7.0 มันจะไม่มีผลกระทบใดๆ กับประโยคนี้ ดังนั้น ผลกระทบแบบเดียวกันภายใต้ IE6.0 จึงเกิดขึ้น เป็นเรื่องยากมาก ขออภัย Safari ยังไม่รองรับแอตทริบิวต์นี้ ดังนั้นคุณต้องเพิ่มสไตล์ CSS ต่อไปนี้:

#รายการ:ว่างเปล่า {
พื้นหลัง: สีเขียว !สำคัญ
-

ตัวเลือก :empty เป็นข้อกำหนด CSS3 แม้ว่า Safari จะไม่รองรับข้อกำหนดนี้ แต่องค์ประกอบนี้จะยังคงถูกเลือกอยู่ ไม่ว่าองค์ประกอบนี้จะมีอยู่หรือไม่ก็ตาม ตอนนี้สีเขียวจะปรากฏบนเบราว์เซอร์อื่นที่ไม่ใช่เวอร์ชัน IE

เพื่อความเข้ากันได้กับ IE6 และ FF คุณสามารถพิจารณาอันก่อนหน้าได้ !สำคัญ โดยส่วนตัวแล้วฉันชอบอันแรกมากกว่าซึ่งเรียบง่ายและมีความเข้ากันได้ดีกว่า