Chromium خطأ في حدود الجدول (?) مع التدرجات

تحياتي أيها الزملاء. لقد بدأنا في نقل منتدانا من Xenforo الخاص إلى Discourse مفتوح المصدر، وفي أثناء عملية تكرار مرئيات منتدانا القديم واجهت مشكلة CSS خاصة بـ Chrome.
لا أعرف ما إذا كان أي شخص آخر قد واجه هذا، ولم أتمكن من العثور على أي مواضيع أخرى في المنتدى حول هذا هنا.

لقد حاولت تطبيق تدرج على أي شيء هو جدول، وفي هذه الحالة قائمة الفئات وقائمة المواضيع.
في Firefox يبدو كما ينبغي:

لقطة شاشة

image

لكن المتصفحات المستندة إلى Chromium تبدو وكأنها تعرض حدًا إضافيًا:

لقطة شاشة

image

وهذا هو CSS المعني (باستخدام قائمة الفئات داخل فئة كمثال):

الكود
#header-list-area .category-list > thead > tr {
  border-color: #a3a3a3;
  background-image: linear-gradient(to right, #a3a3a3, #424242);
}
.category-list > thead > tr {
  border-width: 0px;
  border-left-width: 6px;
  border-style: solid;
}

إذا استخدمت background-color، فإن كلا المتصفحين يعرضان <th> بشكل متطابق، أي بدون الحد الإضافي المتراكب.

لم أتمكن من تكرار هذه المشكلة باستخدام HTML + CSS عاديين أو codepen أو أي أدوات مماثلة. إذا كنت تعرف طريقك حول DOM الخاص بـ Discourse ومحددات/قواعد CSS، فسيتم تقدير مساعدتك بكل سرور.

أعتقد أنني تمكنت من حلها.
كان علي تطبيق الحدود على tr > th:first-child بدلاً من tr. الآن يعرض كلا المتصفحين بشكل متطابق.
ليس لدي أدنى فكرة عن الخطأ الذي كان في وسم tr. قد يكون خطأ لمرة واحدة أو شيء من هذا القبيل.

هذا ليس حلاً نظيفًا، ولكنه سيفي بالغرض لأنه متطابق بصريًا.

3 إعجابات

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.