النص الأصلي: http://www.mikkolee.com/13
لقد درست بعناية سمة المحاذاة العمودية في الأيام الأخيرة ، وفاجأتني النتيجة. هذا معيار CSS ذو الخبرة للغاية يؤدي في الواقع بشكل مختلف في كل متصفح.
هناك الكثير من القيم للمحاذاة الرأسية ، بما في ذلك خط الأساس الفرعي Sub Top Text Text-Bottom Bottom Middle and Valual Length (٪ ، em ، ex ، etc.). اسمحوا لي أن أريكم واحدة من أكثر القيم مبالغ فيها على ما أعتقد: أسفل. الرمز كما يلي:
ص {
حجم الخط: 18 بكسل ؛
رفع الخط: 36 بكسل ؛
Font-Family: Tahoma ، Sans-Serif ؛
}
IMG {
المحاذاة الرأسية: أسفل.
}
ثم دعونا نلقي نظرة على تأثير CSS في المتصفحات المختلفة (يتم صنع الصورة عن قصد ، حتى أتمكن من رؤية الموقف النسبي بوضوح):
حسنًا ، هذه النتيجة لا تصدق في الواقع. عمومًا ، أعتقد أن Firefox سوف يشرح ذلك بشكل صحيح أكثر من IE ، ولكن بعد النظر إلى الأوبرا ، وجدت أنه هو نفسه مثل IE ، في حين أن Safari/Win يقع على جانب Firefox. لأكون صادقًا ، لا أعرف ما الذي يحدث.
لقد درست بعناية "دليل CSS الموثوق (الطبعة الثانية)" وحتى بحثت عن W3C ، ثم صنعت صورة عن المحاذاة الرأسية بنفسي:
وفقًا لـ W3C ، عندما يتم تعيين المحاذاة العمودية لعنصر مضمّن على: خط الأساس ، الأعلى ، القاع ، الأساس (أو الأوسط ، الجزء العلوي ، القاع) للعنصر هو نفس موضع العناصر المحيطة ، مثل الجزء العلوي من الصورة وأعلى النص المحيط. عندما تكون النصوص النصية والفوتوم النصية ، فإن النص (أو أسفل) للعنصر يتوافق مع أعلى النص (أو القاع النص) للعنصر المحيط. عندما يكون الطول (٪ ، em ، ex) ، فإنه يتحرك بناءً على خط الأساس ، لذلك ترتفع الأرقام الإيجابية وتنخفض الأرقام السلبية. عندما يكون الوسط ، يتم محاذاة مركز العنصر مع مركز العنصر المحيط. تعريف المركز هنا هو: الصورة بالطبع نصف الارتفاع ، ويجب تحريك النص بأعلى بمقدار 0.5ex بناءً على خط الأساس ، أي مركز الحرف الصغير x . ومع ذلك ، فإن العديد من المتصفحات غالبًا ما تحدد وحدة EX على أنها 0.5EM ، لذلك ليس بالضرورة مركز X (على سبيل المثال ، يجب أن يكون ارتفاع X 10 بكسل ، بينما يبلغ EM 18 بكسل ، وبالتالي فإن القيمتين مختلفتين).
ومع ذلك ، حتى وفقًا للإرشادات المذكورة أعلاه ، من المذهل أن تفسيرات كل متصفح مختلفة تمامًا. أنا كسول جدًا لدراسة سبب هذا. بشكل عام ، يجب أن يكون لديهم تعريفات مختلفة لموضع كل سطر في الخط ، لذلك لا ترتبط هذه المشكلة فقط بالمحاذاة الرأسية ، ولكن أيضًا بتفسير المتصفح لهيكل النص المضمّن والصور المضمنة.
أخيرًا ، سأقدم لك صفحة اختبار ، ويمكنك إلقاء نظرة على تفسيرات قيم مختلفة من المحاذاة العمودية من قبل كل متصفح.
http://www.mikkolee.com/weblab/001_vertical/
يمكنك اختبار القيم الأخرى ، مثل الأوسط أو النص ، والتي تختلف تمامًا عن كل متصفح. إذا كان لديك أي خبرة ، يرجى مناقشتها ~~