فجوة بكسل في أي

Question

لقد تم وضع أربعة Div باستخدام مطلق تحديد المواقع، كل واحد منها عبارة عن حد مستطيل يتم تشكيله بمجرد تجميعه معًا، ليبدو كما لو تم تحديد عنصر Dom في الصفحة (وهذا يحاكي سلوك حدود CSS باستخدام Div كتراكبات).

• الأيسر لديه تم ضبط الحد الأيسر على "4px أحمر خالص", ، أ عرض 0pس و أ الارتفاع يساوي ارتفاع عنصر Dom المحدد.

• يحتوي الجزء العلوي على حد علوي مضبوط على "4 بكسل أحمر خالص"، وارتفاع 0 بكسل وعرض يساوي عرض عنصر Dom المحدد.

إلخ.تستطيع أن ترى أين يحدث هذا.

أعلم أن هذا غريب، لكنه مفيد جدًا، كما ترى خنزير الأرض على سبيل المثال.

إذن، إليك كيف يبدو الأمر في FF، وopera، وsafari، وchrome:

نص بديل http://img243.imageshack.us/img243/429/captureyv.png

وهنا كيف يبدو الأمر أي 8 :

نص بديل http://img190.imageshack.us/img190/7196/capture1dv.png

فكرت على الفور في مشكلة نموذج الصندوق، لكن أليس من المفترض أن تجعله أضيق؟وعلى أية حال، اعتدت مسج للحصول على العرض والارتفاع، وهو ما من المفترض أن يمنع هذا النوع من المشاكل.ذهبت عبر الأكثر شهرة أي البق, ، ولكن لا يمكن العثور على تطابق.

ماذا تعتقد ؟

ملاحظة :هذا تطبيق مرجعي، بالطبع حاولت تغيير نوع المستند في ملف محلي وقد نجح الأمر، لكن في الإنتاج، لن أتمكن من ذلك.

أستخدم شريط أدوات ie dev لرسم حد حول العنصر الذي تم وضعه على أنه مطلق:

نص بديل http://img21.imageshack.us/img21/3425/capture2uc.png

يمكننا أن نرى الفجوة.

Answer 1

تحقق من الارتفاع "الفعلي" لقسم "الحدود" السفلي باستخدام شريط أدوات مطور IE8.تأكد من أنه "0".

جرب ما يلي لهذا القسم السفلي.

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

او جرب:

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

ما أفكر فيه هو أن IE لن يسمح لك بتعيين div على ارتفاع 0px.لقد رأيت هذا على divs من قبل.

Answer 2

أعتقد أنه يجب عليك العبث بـ DOCTYPE الخاص بك لأن هذا عادةً ما يجعل IE يسير في الاتجاه الصحيح

Answer 3

أفترض أن هذه المشكلة لها علاقة بالهوامش والحشو.هل لديك أي معلومات أو فواصل داخل DIVs الخاصة بك؟قد يؤدي هذا إلى مساحة إضافية لم تأخذها في الاعتبار.

سأقوم بتعديل divs باستخدام هامش:0;انهيار الحدود: انهيار؛

أيضًا، كما ذكرت، في DIV السفلي الخاص بك، يجب أن يكون لديك هذا التعيين على الحد العلوي لمحاولة منع حدوث مثل هذه الفجوات بسبب أي هوامش أو تباعد داخل DIV نفسه.

Answer 4

هل من الممكن أن IE8 لا يتضمن ارتفاع الحدود كجزء من معلمة الارتفاع الخاصة به؟حاول إضافة حجم الحدود أيضًا.

Answer 5

حسنًا، ليس لدي أي حل في الوقت الحالي، لكنني فقط أعرض الحد السفلي من الحد العلوي بدلاً من الحد السفلي الخاص به ويبدو جيدًا بدرجة كافية في الوقت الحالي.إذا كان أي شخص يعرف أفضل، فهو لا يزال موضع ترحيب.