ข้อความต้นฉบับ: http://www.mikkolee.com/13
ฉันได้ศึกษาแอตทริบิวต์แนวตั้งอย่างรอบคอบในช่วงไม่กี่วันที่ผ่านมาและผลลัพธ์ก็ทำให้ฉันประหลาดใจ มาตรฐาน CSS ที่มีประสบการณ์มากนี้มีความแตกต่างกันในแต่ละเบราว์เซอร์
มีค่าจำนวนมากสำหรับแนวตั้งรวมถึงพื้นฐานย่อยย่อยย่อยด้านบนข้อความด้านล่างด้านล่างข้อความด้านล่างด้านล่างและค่าความยาวต่าง ๆ (%, EM, EX, ฯลฯ ) ให้ฉันแสดงให้คุณเห็นหนึ่งในค่าที่เกินจริงที่สุดที่ฉันคิดว่า: ด้านล่าง รหัสมีดังนี้:
P {
ขนาดตัวอักษร: 18px;
ความสูงของสาย: 36px;
Font-Family: Tahoma, Sans-Serif;
-
img {
แนวตั้ง-แนว: ด้านล่าง;
-
จากนั้นมาดูผลของ CSS นี้ในเบราว์เซอร์ต่างๆ
ผลลัพธ์นี้น่าเหลือเชื่อมากจริงๆ โดยทั่วไปฉันคิดว่า Firefox จะอธิบายได้อย่างถูกต้องมากกว่า IE แต่หลังจากดูโอเปร่าฉันพบว่ามันเหมือนกับเช่น Safari/Win อยู่ทางด้านของ Firefox พูดตามตรงฉันไม่รู้ว่าเกิดอะไรขึ้น
ฉันศึกษา "คู่มือ CSS ที่เชื่อถือได้ (ฉบับที่สอง)" อย่างระมัดระวังและค้นหา W3C จากนั้นก็สร้างภาพเกี่ยวกับแนวตั้งด้วยตัวเอง:
อ้างอิงจาก W3C เมื่อมีการตั้งค่าแนวตั้งขององค์ประกอบอินไลน์เป็น: พื้นฐานด้านบนด้านล่างพื้นฐาน (หรือกลางด้านบนด้านล่าง) ขององค์ประกอบเป็นตำแหน่งเดียวกับองค์ประกอบโดยรอบเช่นด้านบนของภาพและด้านบนของข้อความโดยรอบ เมื่อข้อความด้านบนและข้อความด้านล่างเป็นข้อความด้านบน (หรือด้านล่าง) ขององค์ประกอบจัดเรียงข้อความด้านบน (หรือข้อความด้านล่าง) ขององค์ประกอบโดยรอบ เมื่อความยาว (%, EM, EX) มันจะเลื่อนขึ้นอยู่กับพื้นฐานดังนั้นจำนวนบวกจึงเพิ่มขึ้นและจำนวนลบจะลดลง เมื่ออยู่ตรงกลางศูนย์กลางขององค์ประกอบจะอยู่ในแนวเดียวกันกับศูนย์กลางขององค์ประกอบโดยรอบ คำจำกัดความของศูนย์กลางที่นี่คือ: ภาพนั้นมีความสูงครึ่งหนึ่งและข้อความควรถูกเลื่อนขึ้น 0.5EX ขึ้นอยู่กับพื้นฐานนั่นคือ ศูนย์กลางของตัวอักษรตัวพิมพ์เล็ก X อย่างไรก็ตามเบราว์เซอร์จำนวนมากมักจะกำหนดหน่วยของ EX เป็น 0.5em ดังนั้นจึงไม่จำเป็นต้องเป็นศูนย์กลางของ X (เป็นตัวอย่างความสูงของ X ควรเป็น 10px ในขณะที่ EM คือ 18px ดังนั้นค่าทั้งสองจึงแตกต่างกัน)
อย่างไรก็ตามแม้ตามแนวทางข้างต้นมันเป็นเรื่องเหลือเชื่อที่คำอธิบายของแต่ละเบราว์เซอร์นั้นแตกต่างกันมาก ฉันขี้เกียจเกินไปที่จะศึกษาว่าทำไมถึงเป็นเช่นนี้ โดยทั่วไปพวกเขาควรมีคำจำกัดความที่แตกต่างกันของตำแหน่งของแต่ละบรรทัดในตัวอักษรดังนั้นปัญหานี้ไม่เพียง แต่เกี่ยวข้องกับแนวตั้ง แต่ยังอธิบายถึงคำอธิบายของเบราว์เซอร์เกี่ยวกับโครงสร้างของข้อความอินไลน์และรูปภาพอินไลน์
ในที่สุดฉันจะให้หน้าทดสอบแก่คุณและคุณสามารถดูคำอธิบายของค่าที่แตกต่างกันของการจัดแนวแนวตั้งโดยแต่ละเบราว์เซอร์
http://www.mikkolee.com/weblab/001_vertical/
คุณสามารถทดสอบค่าอื่น ๆ เช่นกลางหรือข้อความซึ่งแตกต่างอย่างสิ้นเชิงจากแต่ละเบราว์เซอร์ หากคุณมีประสบการณ์ใด ๆ โปรดพูดคุยเกี่ยวกับมัน ~~