هذه مشكلة أقل وضوحًا عند خلط الخطوط الصينية والإنجليزية في متصفح IE، غالبًا ما يحدث اختلال في المحاذاة.
لذا يأتي الشك مرة أخرى، ما الذي يسبب الانحراف بين الصينية والإنجليزية؟ ! ما هو الحل؟ ! لذلك، بعد الاختبار، وجدت حالتين (بالطبع قد يكون هناك المزيد من المواقف المسببة. يمكنك تجربتها بنفسك). العناصر المتجاورة للكائنات الصينية والإنجليزية لها إعداد سمة المحاذاة الرأسية (مثل الصورة الصغيرة السابقة،). أو مربع النص، نحتاج إلى محاذاتها عموديًا بشكل عام، عندما نقوم بتعيين Vertical-align:middle للصور ومربعات النص (أي عناصر كتلة مضمنة أخرى)، فسوف يؤثر ذلك على المحاذاة غير الصحيحة للغتين الصينية والإنجليزية.
هناك موقف آخر وهو أنه عندما يكون العنصر الأصلي (باستثناء الجداول) يحتوي على مجموعة سمات المحاذاة العمودية، فسيتم أيضًا محاذاة العناصر الفرعية الصينية والإنجليزية بشكل غير صحيح.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<العنوان>اختبار</title>
<نمط النوع = "نص/CSS">
* { الهامش:0؛
أتش تي أم أل { الخلفية: #فف }
الجسم { الموضع: الخط النسبي: 12px/1.6em Verdana، Lucida، Arial، Helvetica، Song Dynasty، sans-serif؛
</نمط>
</الرأس>
<الجسم>
<div style="vertical-align:middle;">
<a href="">لماذا أكون دائمًا في وضع غير صحيح؟ لماذا؟؟</a>
</div>
</الجسم>
</html>
كيفية حل هذه المشكلة؟ !
لنتحدث عن الحل الأول أولاً، وهو الحل لمشكلة المحاذاة غير الصحيحة التي يسببها الوسط الرأسي للعناصر المجاورة:
أضف تكبيرًا: 1 إلى الكائنات الصينية والإنجليزية لتشغيل مخططها، وقد وجد ذلك مرة واحدة يحتوي على مخطط تفصيلي، ولن يكون هناك اختلال في الكائنات الصينية والإنجليزية.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<العنوان>اختبار</title>
<نمط النوع = "نص/CSS">
* { الهامش:0؛
أتش تي أم أل { الخلفية: #فف }
الجسم { الموضع: الخط النسبي: 12px/1.6em Verdana، Lucida، Arial، Helvetica، Song Dynasty، sans-serif؛
</نمط>
</الرأس>
<الجسم>
<ديف>
<a href="" style="zoom:1;">لماذا أتصرف بشكل خاطئ دائمًا؟ لماذا؟؟</a>
</div>
</الجسم>
</html>
الحالة الثانية هي حل مشكلة المحاذاة الخاطئة الناتجة عن الوسط الرأسي للعنصر الأصلي:
أضف الجملة محاذاة عمودية:خط الأساس إلى الكائنات الصينية والإنجليزية لحل المشكلة!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<العنوان>اختبار</title>
<نمط النوع = "نص/CSS">
* { الهامش:0؛
أتش تي أم أل { الخلفية: #فف }
الجسم { الموضع: الخط النسبي: 12px/1.6em Verdana، Lucida، Arial، Helvetica، Song Dynasty، sans-serif؛
</نمط>
</الرأس>
<الجسم>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">لماذا أكون دائمًا في وضع غير صحيح؟ لماذا؟؟</a>
</div>
</الجسم>
</html>
ولكن يمكننا أن نرى أن التسطير يبدو ضيقًا جدًا في هذا الوقت، ما زلنا بحاجة إلى إضافة Zoom:1 لتشغيل hasLayout لتجنب أن يكون ضيقًا جدًا! .
<a href="" style="zoom:1;"vertical-align:baseline;">لماذا أخطأ دائمًا؟ لماذا؟؟</a>
إذا واجهت مواقف أخرى حيث تكون اللغتان الصينية والإنجليزية غير محاذيتين في هذه الحالة، يمكنك أيضًا محاولة استخدام الطريقتين المذكورتين أعلاه لحل المشكلة. بالطبع، الطريقة الأكثر أمانًا وفعالية هي استخدام Song Dynasty باللغتين الصينية والإنجليزية.