الحشو ولا حتى في IE

Question

إذا قمت بلصق الكود التالي في ملف test.html وتصفحت باستخدام فايرفوكس، فلا بأس.ولكن إذا قمت بالتصفح باستخدام IE، يمكنك أن ترى أن هناك مساحة أكبر على يمين <a> عنصر.:

<style>
li { 
    display:inline;
    margin:0 90px;
    padding:6px 12px;
    background:#777777 none repeat scroll 0 0;
}



li a {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>


<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>

يحرر:كيفية جعل النص حتى في آي إي؟

Answer 1

لإجابة على سؤالك ببساطة: وضع جميع العناصر li الخاص بك على خط واحد أو تطفو عليها

.

Answer 2

لقد اطلعت على مصدرك وجربته بنفسي.

في Firefox 3.0.11 وInternet Explorer 8 كنت أعرض صفحات متطابقة إلى حد كبير.

شيء واحد يمكنني قوله هو أن الصفحات بدت مختلفة في البداية لأن المتصفحات الخاصة بي كانت بعرض مختلف ولكن ليس مشكلة الهامش التي كنت تواجهها.في حالتي، نجح تغيير حجم المتصفح.

لكن المشكلة التي تواجهها شائعة.سيعرض Internet Explorer دائمًا صفحات مختلفة عما يعرضه المتصفح المتوافق مع المعايير عادةً.إحدى الطرق التي اكتشفها الأشخاص للتغلب على هذه المشكلة (وهذا قد يحل مشكلتك جيدًا) هي استخدام ورقة إعادة تعيين CSS.

بعض الأشياء الجيدة هي:

• إعادة تعيين إريك ماير لـ CSS
• ياهو!YUI إعادة تعيين CSS

Answer 3

تكمن المشكلة في وجود خلاف مؤسف بين المتصفحات حول المكان الذي يقرر فيه نموذج مربع CSS ما يجب فعله بشأن الحشو:

• يقوم IE بتقليل المساحة المخصصة للمحتوى الموجود داخل div عند زيادة المساحة المتروكة، وبالتالي يتم الحفاظ على حجم div كما هو
• يقوم Firefox بزيادة حجم div باستخدام الحشوة، مع الحفاظ على حجم المحتوى كما هو.

Answer 4

واختبارها في IE6، على ما يبدو لإضافة مساحة إضافية لتثبيت العلامات. نسخ ولصق ذلك، وسوف ترى بنفسك. فايرفوكس لا يضيف مساحة إضافية.

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

li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}