แอตทริบิวต์ความเข้ากันได้แบบอินไลน์บล็อก

ปีที่แล้วไม่มีบทความเกี่ยวกับแอตทริบิวต์ Inline-Block บนอินเทอร์เน็ต เพื่อที่จะช่วยให้ทุกคนเข้าใจคุณลักษณะได้ดีขึ้นฉันได้สรุปและรวบรวมบทความ "ความลึก: ความเข้าใจเชิงลึกของการแสดงผล: Inline-Block"

ขณะนี้มีความต้องการที่เพิ่มขึ้นสำหรับการประยุกต์ใช้แอตทริบิวต์แบบอินไลน์บล็อก น่าเสียดายที่มีเพียง Firefox3 Beta, IE8 Beta, Opera และ Safari เท่านั้นที่รองรับคุณลักษณะแบบอินไลน์บล็อก (หมายเหตุ: เฉพาะโอเปร่าและซาฟารีเท่านั้นที่รองรับพวกเขา) แต่ IE6 และ IE7 สามารถจำลองได้โดยทริกเกอร์ Haslayout Firefox2 มี -moz-inline-box และ -moz-inline-stack แอตทริบิวต์ส่วนตัว (การเปรียบเทียบแอตทริบิวต์ทั้งสองนี้อ้างอิงจาก "สองตัวอย่างของการประยุกต์ใช้การแสดงผล: inline-block")

ในแอปพลิเคชันจริง -Moz-Inline-Box จะมีปัญหาเช่นการจัดตำแหน่งระหว่างองค์ประกอบ แม้ว่า Firefox จะมีอสังหาริมทรัพย์ส่วนตัว -Moz-Box-Ag-Ag-Ag เพื่อช่วยแก้ปัญหาการจัดตำแหน่ง แต่ก็ยังยากที่จะทำนายปัญหามากมาย -moz-inline-stack ค่อนข้างพูดเหมือน Inline-Block ซึ่งสามารถทดสอบได้ใน Firefox3 อย่างไรก็ตามจะมีข้อผิดพลาดเมื่อใช้ -moz-inline-stack หากองค์ประกอบด้านนอกของจอแสดงผล: -moz-inline-stack; จะปรากฏขึ้น: อินไลน์; ซึ่งจะทำให้ลิงก์ที่มีอยู่ใน Firefox ไม่สามารถทำได้และสิ่งนี้จะต้องแก้ไขโดยตำแหน่ง: ญาติ;

รหัสสุดท้ายที่เราจำลองมีดังนี้:

แสดง: Inline-Block; /*Firefox3 Beta, IE8 Beta, Opera, Safari Support, Haslayout เรียกองค์ประกอบอินไลน์ภายใต้ IE*/

แสดง: -moz-inline-stack; / * คุณลักษณะส่วนตัวของ Firefox คุณสามารถใช้ -Moz-Inline-Box *//

ซูม: 1; /*IE Trigger Haslayout*/

*แสดง: อินไลน์; /*เมื่อ Haslayout ถูกทริกเกอร์ภายใต้ IE การตั้งค่าองค์ประกอบบล็อกเป็นอินไลน์จะทำให้การแสดงผล: เอฟเฟกต์แบบอินไลน์คล้ายกับการแสดง: Inline-block*/

Text-Indent: -9999px;

*Indentent: 0;

ขนาดตัวอักษร: 0;

ความสูงบรรทัด: 0; /* หากคุณต้องการซ่อนข้อความคุณลักษณะทั้งสี่นี้สามารถใช้*//

/*นอกจากนี้ข้อความที่ซ่อนอยู่ด้านบนสามารถซ่อนได้และสามารถใช้วิธีการที่ง่ายขึ้นได้มากขึ้น: ความสูงของสาย: ค่าสุดยอด; ขนาดตัวอักษร: 0; -

ล้น: ซ่อน; /* ซ่อนเนื้อหาล้น*/

แนวตั้ง-แนว: กลาง; /* ตั้งอยู่ตรงกลางในแนวตั้งภายในบรรทัดสำหรับการเบี่ยงเบนที่ใหญ่กว่าของโอเปร่า*//

ความกว้าง:? PX; - เป็นค่าที่ไม่ใช่ AUTO*//

ความสูง:? PX; - เป็นค่าที่ไม่ใช่ AUTO*//