1. การตีความแบบต่างๆ ของล่ามกล่อง #box{
ความกว้าง:600px; //สำหรับ ie6.0-
width:500px; //สำหรับ ff+ie6.0
-
#กล่อง{
ความกว้าง:600px!สำคัญ //สำหรับ ff
ความกว้าง:600px; //สำหรับ ff+ie6.0
ความกว้าง :500px; // สำหรับ ie6.0-
-
2. หากต้องการซ่อน CSS ใน IE ให้ใช้ตัวเลือกย่อย
html>body #box{ }
3 ได้รับการยอมรับจาก IE เท่านั้น
*html #box{ }
4. ใช้งานได้ใน ie/win แต่ซ่อนอยู่ใน ie/max ให้ใช้แบ็กสแลช
5. กำหนดสไตล์แยกกันเช่น
6. ระยะทางสองเท่าที่เกิดจากการลอยตัว เช่น
#กล่อง{
ลอย:ซ้าย;
ความกว้าง:100px;
อัตรากำไรขั้นต้น:0 0 0 100px // ในกรณีนี้ IE จะสร้างระยะห่าง 200px
display:inline; // ละเว้นการลอยตัว
}
เรามาพูดถึงรายละเอียดเกี่ยวกับบล็อกองค์ประกอบทั้งสองและแบบอินไลน์ที่นี่ คุณลักษณะขององค์ประกอบบล็อกคือ: โดยเริ่มจากบรรทัดใหม่เสมอ และสามารถควบคุมความสูง ความกว้าง ความสูงของเส้น และระยะขอบได้ (องค์ประกอบบล็อก) ลักษณะขององค์ประกอบอินไลน์คือ: และองค์ประกอบอื่นๆ อยู่ในบรรทัดเดียวกัน,... ไม่สามารถควบคุมได้ (องค์ประกอบอินไลน์);
#กล่อง{
display:block; //สามารถจำลององค์ประกอบแบบอินไลน์เป็นองค์ประกอบบล็อกได้
display:inline; //บรรลุผลของการจัดเรียงในบรรทัดเดียวกัน
diplay:table; //สำหรับ ff จำลองเอฟเฟกต์ของตาราง
-
7 สำหรับโอเปร่าเท่านั้น
@media ทั้งหมด และ (ความกว้างขั้นต่ำ:0px){
#กล่อง{ }
}
8. ปัญหาเกี่ยวกับ IE และความกว้างและความสูง
IE ไม่รู้จักคำจำกัดความของ min- แต่ในความเป็นจริงแล้ว IE ถือว่าความกว้างและความสูงปกติเหมือนกับว่ามี min- นี่จะเป็นปัญหาใหญ่หากคุณใช้เฉพาะความกว้างและความสูง
ค่าทั้งสองนี้จะไม่เปลี่ยนแปลงในเบราว์เซอร์ปกติ หากคุณใช้เฉพาะ min-width และ min-height แสดงว่าความกว้างและความสูงไม่ได้ตั้งค่าไว้เลยใน IE
เช่น หากคุณต้องการตั้งค่าภาพพื้นหลัง ความกว้างนี้จะมีความสำคัญมากกว่า เพื่อแก้ไขปัญหานี้ คุณสามารถทำได้:
#box{
ความกว้าง: 80px;
ความสูง: 35px;
-
html>body #box{
ความกว้าง: อัตโนมัติ;
ความสูง: อัตโนมัติ;
ความกว้างขั้นต่ำ: 80px;
ความสูงขั้นต่ำ: 35px;
-
9. ความกว้างขั้นต่ำของหน้า
ความกว้างขั้นต่ำ เป็นคำสั่ง CSS ที่สะดวกมาก ซึ่งสามารถระบุได้ว่าความกว้างขั้นต่ำขององค์ประกอบต้องไม่น้อยกว่าความกว้างที่กำหนด เพื่อให้แน่ใจว่าการเรียงพิมพ์นั้นถูกต้องเสมอ แต่ IE ไม่รู้จักสิ่งนี้ และจริงๆ แล้วถือว่าความกว้างเป็นความกว้างขั้นต่ำ เพื่อให้คำสั่งนี้พร้อมใช้งานบน IE คุณสามารถวางไว้ใต้แท็ก <body> จากนั้นระบุคลาสสำหรับ div ได้ CSS ได้รับการออกแบบดังนี้:
#container{
ความกว้างขั้นต่ำ: 600px;
width:expression(document.body.clientWidth < 600? "600px": "อัตโนมัติ" );
-
ความกว้างขั้นต่ำอันแรกเป็นเรื่องปกติ แต่ความกว้างในบรรทัดที่สองใช้ Javascript ซึ่ง IE เท่านั้นที่รู้จัก ซึ่งจะทำให้เอกสาร HTML ของคุณเป็นทางการน้อยลงด้วย จริงๆ แล้วใช้ความกว้างขั้นต่ำผ่านการตัดสิน Javascript
สามารถใช้วิธีการเดียวกันนี้เพื่อให้ได้ความกว้างสูงสุดสำหรับ IE:
#คอนเทนเนอร์
-
ความกว้างขั้นต่ำ: 600px;
ความกว้างสูงสุด: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
-
10 ลอยชัดเจน
.แฮ็กบ็อกซ์{
display:table; //แสดงวัตถุเป็นตารางระดับองค์ประกอบบล็อก
-
หรือ
.แฮ็กบ็อกซ์{
ชัดเจน:ทั้งสอง;
}
หรือเพิ่ม: after (วัตถุหลอก) เพื่อตั้งค่าเนื้อหาที่เกิดขึ้นหลังจากวัตถุ โดยปกติแล้วจะใช้ร่วมกับเนื้อหา IE ไม่รองรับวัตถุหลอกนี้และเบราว์เซอร์ Ie ไม่รองรับ ดังนั้นจึงไม่ส่งผลกระทบต่อ IE/ ชนะเบราว์เซอร์ -------นี่คือสิ่งที่ลำบากที่สุด...
#box:หลัง{
เนื้อหา: ".";
จอแสดงผล: บล็อก;
ความสูง: 0;
ชัดเจน: ทั้งสอง;
การมองเห็น: ซ่อนเร้น;
-
11. ข้อความ IE แบบลอยตัวของ DIV ทำให้เกิดข้อผิดพลาด 3 พิกเซล
วัตถุทางด้านซ้ายลอยอยู่ และตำแหน่งทางขวาโดยใช้ระยะขอบด้านซ้ายของแพทช์ด้านนอก ข้อความภายในวัตถุทางด้านขวาจะเว้นระยะห่าง 3px จากด้านซ้าย
#กล่อง{
ลอย:ซ้าย;
ความกว้าง:800px;
-
#ซ้าย{
ลอย:ซ้าย;
ความกว้าง:50%;
-
#ขวา{
ความกว้าง:50%;
-
*html #ซ้าย{
ขอบขวา: -3px; // ประโยคนี้คือกุญแจสำคัญ
}
รหัส HTML
12. ตัวเลือกแอตทริบิวต์ (ไม่สามารถถือว่าเข้ากันได้ มันเป็นข้อผิดพลาดในการซ่อน CSS)
พี[รหัส]{}
div[id]{}
ถูกซ่อนไว้สำหรับเวอร์ชันที่ต่ำกว่า IE6.0 และ IE6.0
ยังคงมีความแตกต่างระหว่างตัวเลือกแอตทริบิวต์และตัวเลือกย่อยที่ใช้โดย FF และ OPera ขอบเขตของอุปกรณ์ค่อนข้างใหญ่ ตัวอย่างเช่น ใน p[id] แท็ก p ทั้งหมดที่มี id จะมีลักษณะเหมือนกัน