เมื่อเร็วๆ นี้ ฉันกำลังสร้างเว็บไซต์ใหม่สำหรับตัวเอง และพบเอฟเฟกต์บางอย่าง แต่ก็พบปัญหาเล็กน้อยระหว่างการใช้งาน เช่น บล็อกแบบอินไลน์นี้ โชคดีที่ปัญหาส่วนใหญ่ได้รับการแก้ไขแล้ว ดังนั้นฉันจึงเขียนมาเพื่อแบ่งปัน
เมื่อเรากำลังสร้างหน้าเว็บ บางครั้งเราต้องการให้องค์ประกอบสามารถกำหนดความกว้างและความสูงได้เหมือนกับบล็อก และยังสามารถทำงานอย่างต่อเนื่องได้เหมือนกับอินไลน์ปกติ ตัวอย่างเช่น สถานที่ที่มีเครื่องหมายเส้นสีแดงในภาพด้านล่าง:
โดยปกติแล้วเราใช้โค้ดลักษณะนี้เพื่อให้บรรลุผลดังกล่าว:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] แม้ว่าจะสามารถบรรลุเป้าหมายได้ แต่โค้ดก็ยังไม่ได้รับการขัดเกลาและยืดหยุ่นเพียงพอ ในทางที่ดี เราสามารถทำได้โดยใช้โค้ดต่อไปนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] ในกรณีนี้ เราจำเป็นต้องระบุความกว้าง ความสูง และภาพพื้นหลังสำหรับแท็ก อย่างไรก็ตาม แอตทริบิวต์การแสดงผลเริ่มต้นของแท็กเป็นแบบอินไลน์ และความกว้างและความสูงไม่ถูกต้อง และหากตั้งค่า display:block เป็น a แม้ว่าปัญหาความกว้างและความสูงจะสามารถแก้ไขได้ แต่องค์ประกอบก็จะแยกบรรทัดโดยอัตโนมัติและไม่สามารถบรรลุผลตามที่เราต้องการได้ มีวิธีใดบ้างที่จะบรรลุผลแบบเดียวกับแท็ก img ซึ่งสามารถตั้งค่าความสูงและความกว้างได้โดยไม่แบ่งบรรทัดโดยอัตโนมัติ
คำตอบคือใช่ Opera และ Webkit รองรับการแสดงคุณสมบัติ CSS2: inline-block การใช้คุณลักษณะนี้ทำให้เราสามารถบรรลุผลที่เราต้องการได้อย่างเต็มที่ภายใต้ Opera แต่จะไม่ทำงานภายใต้เบราว์เซอร์อื่น
คุณลักษณะการแสดงผลยังมีการแสดงค่าที่ใช้กันทั่วไปน้อยกว่า: ตารางอินไลน์ การใช้ค่านี้ยังสามารถบรรลุผลที่เราต้องการได้อย่างเต็มที่ คุณสมบัตินี้รองรับเบราว์เซอร์ทั้งหมดอย่างถูกต้อง ยกเว้น IE แต่... ก็ IE อีกครั้ง แม้ว่านักพัฒนาเว็บทุกคนจะเกลียดมันเมื่อต้องเผชิญกับ CSS แต่การละทิ้ง IE ก็เท่ากับการละทิ้งผู้ใช้ถึง 70% ดังนั้นเราจึงยังคงต้องหาวิธีแก้ปัญหาอื่น ๆ
ฉันไม่มีทางเลือกอื่นนอกจากลองใช้ Google และฉันก็พบมันจริงๆ ดังที่ได้กล่าวไว้ในบทความนี้ หากคุณทริกเกอร์ hasLayout ของ IE เป็นครั้งแรก จากนั้นตั้งค่า display: inline องค์ประกอบนี้จะกลายเป็น inline-block! ด้วยวิธีนี้ เราสามารถใช้ประโยชน์จากคุณลักษณะที่ไม่สมเหตุสมผลของ IE และรวมเข้ากับ CSS บางตัวได้ แฮ็กการให้โค้ด CSS เข้ากันได้กับเบราว์เซอร์ต่างๆ:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] .องค์ประกอบคลาส {
จอแสดงผล: -moz-inline-stack; // รหัสเฉพาะ Firefox
จอแสดงผล: inline-block; // เบราว์เซอร์มาตรฐานบางตัว
ซูม: 1; //IE เท่านั้น
*display: inline; // มีเพียง IE เท่านั้นที่รู้รหัสนี้ (CSS Hack)
-
ด้วยโค้ดนี้ คุณสามารถบรรลุบล็อกอินไลน์ที่ทำงานอย่างสม่ำเสมอในเบราว์เซอร์ต่างๆ อย่างไรก็ตาม วิธีนี้มีข้อเสียเปรียบเล็กน้อย กล่าวคือ ไม่สามารถผ่านการตรวจสอบ W3C CSS ได้ แน่นอนว่ามันง่ายมากที่จะผ่านการตรวจสอบ คุณสามารถออกสไตล์ชีตพร้อมแอตทริบิวต์ตารางอินไลน์ให้กับเบราว์เซอร์อื่นที่ไม่ใช่ IE และออก IE Only CSS สำหรับ IE แยกต่างหาก
