เคล็ดลับความเข้ากันได้ของ CSS (IE และ Firefox)

ความเข้ากันได้ของ CSS กับเบราว์เซอร์บางครั้งทำให้ผู้คนปวดหัว บางทีเมื่อคุณเข้าใจเทคนิคและหลักการแล้วมันก็ไม่ใช่เรื่องยาก ฉันได้รวบรวมเคล็ดลับความเข้ากันได้สำหรับ IE7, 6 และ Fireofx จากอินเทอร์เน็ตและจัดเรียงออก สำหรับการเปลี่ยนไปใช้ web2.0 โปรดลองเขียนโค้ดในรูปแบบ xhtml และ DOCTYPE จะส่งผลต่อการประมวลผล CSS ตามมาตรฐาน W3C จะต้องเพิ่มคำสั่ง DOCTYPE

เคล็ดลับ CSS

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

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

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

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

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

<#div id=”imfloat”>
CSS ที่สอดคล้องกันคือ
#ลอยตัว{
ลอย:ซ้าย;
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 คุณสามารถใส่