تحياتي أيها الزملاء. لقد بدأنا في نقل منتدانا من Xenforo الخاص إلى Discourse مفتوح المصدر، وفي أثناء عملية تكرار مرئيات منتدانا القديم واجهت مشكلة CSS خاصة بـ Chrome.
لا أعرف ما إذا كان أي شخص آخر قد واجه هذا، ولم أتمكن من العثور على أي مواضيع أخرى في المنتدى حول هذا هنا.
لقد حاولت تطبيق تدرج على أي شيء هو جدول، وفي هذه الحالة قائمة الفئات وقائمة المواضيع.
في Firefox يبدو كما ينبغي:
لقطة شاشة
![]()
لكن المتصفحات المستندة إلى Chromium تبدو وكأنها تعرض حدًا إضافيًا:
لقطة شاشة
![]()
وهذا هو 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، فسيتم تقدير مساعدتك بكل سرور.