การวิเคราะห์โดยละเอียดของแอตทริบิวต์การจัดแนวแนวตั้ง ในช่วงไม่กี่วันที่ผ่านมา ฉันได้ศึกษาคุณลักษณะการจัดตำแหน่งแนวตั้งอย่างรอบคอบ ผลลัพธ์ที่ได้ทำให้ฉันประหลาดใจมาก
มีค่ามากมายสำหรับการจัดแนวแนวตั้ง รวมถึงค่าพื้นฐาน sub supper บนสุด ข้อความบน ล่างข้อความ ล่างกลาง และค่าความยาวต่างๆ (%, em, ex, ฯลฯ) ก่อนอื่นให้ฉันแสดงให้คุณเห็นค่าที่ฉันคิดว่าเกินจริงที่สุด: ด้านล่าง รหัสมีดังนี้:
ตัวอย่างซอร์สโค้ด
[www.52css.com] พี {
ขนาดตัวอักษร: 18px;
ความสูงของบรรทัด: 36px;
ตระกูลฟอนต์: Tahoma, sans-serif;
-
ไอเอ็มจี {
จัดแนวตั้ง: ด้านล่าง;
-
จากนั้นลองดูเอฟเฟกต์ของ CSS นี้ในเบราว์เซอร์ต่างๆ (ภาพนี้จงใจทำแบบนั้นเพื่อให้มองเห็นตำแหน่งสัมพัทธ์ได้ชัดเจน):
ผลลัพธ์นี้น่าประหลาดใจมากจริงๆ โดยทั่วไป ฉันคิดว่า Firefox จะอธิบายได้ถูกต้องมากกว่า IE แต่หลังจากดู Opera แล้ว ฉันพบว่ามันเหมือนกับ IE ในขณะที่ Safari/Win อยู่ข้างๆ Firefox . พูดตามตรงฉันไม่รู้ว่าเกิดอะไรขึ้น
ฉันศึกษา "CSS Definitive Guide (Second Edition)" อย่างละเอียดถี่ถ้วน และยังปรึกษากับ W3C อีกด้วย จากนั้นจึงสร้างไดอะแกรมเกี่ยวกับการจัดแนวตั้งด้วยตนเอง:
ตามคำจำกัดความของ W3C เมื่อตั้งค่าการจัดแนวตั้งขององค์ประกอบอินไลน์เป็น:
1. เมื่อใช้เส้นฐาน ด้านบน และด้านล่าง เส้นฐาน (หรือตรงกลาง บน ล่าง) ขององค์ประกอบจะสอดคล้องกับตำแหน่งเดียวกันขององค์ประกอบโดยรอบ เช่น ด้านบนของรูปภาพและด้านบนของข้อความโดยรอบ
2. เมื่อใช้ข้อความด้านบนและด้านล่างของข้อความ ด้านบน (หรือด้านล่าง) ขององค์ประกอบจะสอดคล้องกับข้อความด้านบน (หรือด้านล่างของข้อความ) ขององค์ประกอบโดยรอบ
3. ความยาว (%, em, ex) ถูกเลื่อนขึ้นตามเส้นฐาน ดังนั้นจำนวนบวกจึงเพิ่มขึ้นและจำนวนลบจะลดลง
4. เมื่ออยู่ตรงกลาง จุดศูนย์กลางขององค์ประกอบจะอยู่ในแนวเดียวกับจุดศูนย์กลางขององค์ประกอบโดยรอบ คำจำกัดความของ "ศูนย์กลาง" ในที่นี้คือ แน่นอนว่ารูปภาพนั้นสูงเพียงครึ่งหนึ่ง และข้อความควรเลื่อนขึ้น 0.5ex โดยอิงจากเส้นพื้นฐาน ซึ่งก็คือจุดศูนย์กลางของอักษรตัวพิมพ์เล็ก "x" อย่างไรก็ตาม เบราว์เซอร์จำนวนมากมักจะกำหนดหน่วยของ ex เป็น 0.5em ดังนั้นจึงไม่จำเป็นต้องเป็นจุดศูนย์กลางของ x ที่แน่นอน (เช่น ในภาพด้านบน ความสูงของ x ควรเป็น 10px และ em คือ 18px ดังนั้นทั้งสอง ค่านิยมจะต่างกัน)
อย่างไรก็ตาม แม้จะปฏิบัติตามหลักเกณฑ์ข้างต้นแล้ว ฉันยังสับสนที่เบราว์เซอร์ตีความสิ่งต่าง ๆ ออกไปมาก ฉันขี้เกียจเกินไปที่จะค้นคว้าว่าทำไมถึงเป็นเช่นนี้ โดยทั่วไปควรเป็นว่าพวกเขามีคำจำกัดความที่แตกต่างกันของตำแหน่งของแต่ละบรรทัดของแบบอักษร ดังนั้นปัญหานี้ไม่เพียงเกี่ยวข้องกับการจัดแนวตั้งเท่านั้น แต่ยังรวมถึงการตีความโครงสร้างของข้อความในบรรทัดและรูปภาพในบรรทัดของเบราว์เซอร์ด้วย มีส่วนเกี่ยวข้องกับมันมาก
