في الأيام الأخيرة، قمت بدراسة تحليل مفصل لسمة المحاذاة العمودية بعناية، وكانت النتيجة فاجأتني.
هناك الكثير من قيم المحاذاة العمودية، بما في ذلك النص الأساسي والنص العلوي والسفلي والنص السفلي والوسط وقيم الطول المختلفة (%، em، ex، وما إلى ذلك). اسمحوا لي أولاً أن أعرض لكم القيمة التي أعتقد أنها الأكثر مبالغة: القاع. الرمز هو كما يلي:
مثال لكود المصدر
[www.52css.com] ص {
حجم الخط: 18 بكسل؛
ارتفاع الخط: 36 بكسل؛
عائلة الخط: Tahoma، sans-serif؛
}
إم جي {
محاذاة عمودية: أسفل؛
}
ثم ألق نظرة على تأثير CSS هذا في المتصفحات المختلفة (تم تصميم الصورة بهذه الطريقة عمدًا، بحيث يمكن رؤية الموضع النسبي بوضوح):
حسنًا، هذه النتيجة في الواقع مفاجئة للغاية، بشكل عام، أعتقد أن Firefox سيشرحها بشكل صحيح أكثر من IE، ولكن بعد النظر إلى Opera، وجدت أنها مماثلة لـ IE، في حين أن Safari/Win موجود بجانب Firefox. . لأكون صادقًا، لا أعرف ما الذي يحدث.
لقد قمت بدراسة "الدليل النهائي لـ CSS (الإصدار الثاني)" بعناية، واستشرت W3C، ثم قمت بعمل رسم تخطيطي حول المحاذاة العمودية بنفسي:
وفقًا لتعريف W3C، عندما يتم تعيين المحاذاة الرأسية لعنصر مضمن على:
1. عند استخدام الخط الأساسي والأعلى والأسفل، تتم محاذاة الخط الأساسي (أو الأوسط، العلوي، السفلي) للعنصر مع نفس موضع العناصر المحيطة، مثل أعلى الصورة وأعلى النص المحيط.
2. عند استخدام النص العلوي والنص السفلي، تتم محاذاة الجزء العلوي (أو السفلي) للعنصر مع الجزء العلوي (أو النص السفلي) للعناصر المحيطة.
3. يتم تحريك الطول (%، em، ex) لأعلى استنادًا إلى خط الأساس، وبالتالي ترتفع الأرقام الموجبة وتنخفض الأرقام السالبة.
4. عندما يكون في المنتصف، يكون مركز العنصر محاذيًا لمركز العناصر المحيطة. تعريف "المركز" هنا هو: الصورة هي بالطبع نصف الارتفاع، ويجب نقل النص للأعلى 0.5ex بناءً على خط الأساس، وهو المركز الدقيق للحرف الصغير "x". ومع ذلك، غالبًا ما تحدد العديد من المتصفحات وحدة ex على أنها 0.5em، بحيث لا تكون بالضرورة المركز الدقيق لـ x (على سبيل المثال، في الصورة أعلاه، يجب أن يكون ارتفاع x 10 بكسل، وem هو 18 بكسل، لذا فإن الاثنين القيم مختلفة).
ومع ذلك، حتى مع اتباع الإرشادات المذكورة أعلاه، فإنه يحيرني أن المتصفحات تفسر الأشياء بشكل مختلف تمامًا. أنا كسول جدًا للبحث عن سبب حدوث ذلك. بشكل عام، يجب أن يكون لديهم تعريفات مختلفة لموضع كل سطر من الخط، لذا فإن هذه المشكلة لا تتعلق فقط بالمحاذاة الرأسية، ولكن أيضًا بتفسير المتصفح لبنية النص المضمن والصور المضمنة لديها الكثير لتفعله حيال ذلك.
