اختفاء حدود خلايا جدول CSS في المتصفحات المستندة إلى Gecko

Question

لدي بنية جدول html محددة للغاية ويبدو أنها تكشف عن خطأ في Gecko.

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

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

يوجد سطر مفقود فوق الرقم "3" في الخلية اليمنى السفلية - قم بمشاهدته في أي متصفح آخر وسيظهر السطر كما هو متوقع.ومن المثير للاهتمام، التخلص من قسم العنوان في الجدول وانظر إلى ما حصلنا عليه:

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

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

Answer 1

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

وتحرير: الحل - إذا وضعت style="border-color: ...;" على <td rowspan="3"> يمكنك الحصول على الحدود في الظهور، لكنه لا يملك أن يكون <م> مختلفا اللون - استخدام واحد فقط وهذا أقرب إلى الآخرين قدر الإمكان. على سبيل المثال، إذا كان الجدول # FF0000 تستخدم # ff0001

Answer 2

لقد وجدت أيضًا هذا الخطأ ولكنه ليس موجودًا على جهاز الكمبيوتر الخاص بي ولكنه موجود في خطأ آخر.إذا قمت بتغيير حجم نافذة المتصفح بعد دقة معينة، فسوف تختفي الخطوط.بمجرد تكبير النافذة، يعود كل شيء.يمكنك إصلاح هذا بشكل دائم عن طريق ضبط border-collapse:separate;وهذا يعطي كل ملل من كل خلية عرضه الخاص.هذا ليس ما أريد أن أفعله ولكنه يعمل.

ويمكن أيضًا أن يحدث ذلك عن طريق استخدام border-collapse:collapse;ثم قم بتعيين محاذاة الحدود إلى 1 بكسل ثم 0 بكسل.نظرًا لأنه ينهار الحدود، يبدو أنه يعطي الأولوية لـ 0px على عرض 1px.

وفي كلتا الحالتين فهو متصفح فايرفوكس فقط وهذا سبب آخر للابتعاد عنه.