لماذا تحول أحكام الحرائق الجريئة رأسيا على ويندوز؟

StackOverflow https://stackoverflow.com/questions/2432328

سؤال

في Firefox 3.6، IE7 والأوبرا 10 على Windows، يحتوي HTML هذا على سلوك غريب:

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

يتم تحويل فترة جريئة في الوسط إلى أسفل بكسل واحد. هذا لا يحدث لخطوط أخرى.

لماذا هذا؟ كيف يمكنني إصلاح ذلك؟

هل كانت مفيدة؟

المحلول

لماذا هذا؟

سؤال ممتاز. قضى فقط نصف ساعة في محاولة لمعرفة السبب، دون جدوى. لا يبدو أن حل Marcgg يعمل، إما، فإن الإزاحة لا تزال هناك. جوجل تنفجر لا شيء. يبدو أن هذا فقط يحدث على Windows، وليس فقط في المتصفحات التي تذكرها، ولكن أيضا في الأوبرا 9 و IE6. لا في فايرفوكس 2.0 رغم ذلك. محيرة.

كيف يمكنني إصلاح ذلك؟

الحل الوحيد الذي عمل حتى الآن بالنسبة لي هو:

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

أي تحديد الحقيبة بدلا من monospace. هذا يجعل هذا المستمر في جميع المتصفحات التي اختبرتها (IE6، Opera 9، FF 2.0 تحت نظام التشغيل Windows 2000؛ Opera 10، FF 3، و Konqueror تحت Ubuntu). لماذا، لا يزال لدي أي فكرة.

نصائح أخرى

انها مجرد تأثير بصرية. احصل على لقطة شاشة وتكبيرها: سترى النص الأساسي لا يتغير على الإطلاق.

يجب إصلاح نفسه إذا اخترت تباين لون مختلف.

تحديث

النص بديل http://img690.imageshack.us/img690/421/OPTICALEFFECT.PNG.

المشكلة هي الخط "Courier جديد" وهو الخط الافتراضي يستخدم أكثر متصفحات Windows عندما يتم طلب "monospace". بالنسبة إلى البدل الجريء، فإن الأساس هو في إزاحة مختلفة:

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

مع هذا الرمز، يمكنك أن ترى أن النص الأوسط قد تحولت إلى أعلى (= إزاحة خط الأساس المختلفة) ولكن لون الخلفية محاذاة الآن بشكل صحيح.

الحل هو طلب "ساعي" كخط وتجنب "البريد السريع".

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top