خلية الجدول والحدود التي تظهر بشكل مختلف في IE / كروم وفايرفوكس / أوبرا

https://stackoverflow.com/questions/701332

22-08-2019
|

سؤال

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

والآن يبدو هذا واضحة جدا، وخلق خلية جدول 100px واسعة و100px عالية مع الحدود 6px. كما بسيطة كما يبدو، أنها تبدو مختلفة في مختلف المتصفحات. في IE8 وجوجل كروم خلية الجدول هو 112 س 112 بكسل (حتى 100px داخل وخارج 6px). في فايرفوكس 3 والأوبرا الجدول هو 112 × 100 بكسل (لذلك لسبب يضاف الحدود لعرض الجدول ولكن ليس إلى ارتفاع الجدول).

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

المحلول

<اقتباس فقرة>

وعلى محمل الجد، ما يعطي؟

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

وFWIW لا أعتقد أن التفسير موزيلا / أوبرا يجعل أي معنى، ولكن لا أستطيع أن أقول انها خارج والخروج الخاطئ.

<اقتباس فقرة>

وكيف يمكنني جعل هذا جعل نفسه على كل متصفح (وليس أنا لا يمكن استخدام شعبة أنا بحاجة إلى استخدام الجدول في هذه الحالة).

وماذا عن شعبة داخل الجدول؟

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

والآن فمن الواضح الذي القياس '100px' يشير إلى. يعمل هذا بالنسبة لي.

نصائح أخرى

هل حاولت DOCTYPES البعض؟ لقد كان حظا سعيدا مع:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

وأنا عابث مع حولها قليلا، وهناك بضعة أشياء، وضعت معا، التي جعلت منهم ينظر الى نفسه بالنسبة لي في IE7 وفايرفوكس 2. الأمرين كان علي أن أفعل هم:

وأ) إضافة display:block. إلى نمط خلية الجدول (مصنوعة فايرفوكس تقديم ارتفاع الخلية في نفس الطريق كما فعل IE)؛

وب) وأضاف مسافة غير منقسمة إلى الخلية (وإلا IE لم يظهر حدود).

وليس لدي IE8 أو فايرفوكس 3 تحميل، ولكن يمكنك محاولة إعطائها. لست متأكدا إذا كان هناك أي آثار جانبية لتغيير العرض لمنع، ولكنه حل هذه القضية.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow