Почему в FF пропадает бордер у элемента?

Question

[Анна Бакурова]

Ссылка на страницу. Нажимаем на любом блоке кнопку сравнить.
И видим что в четвёртом ряду у первого блока "Функциональность" нет бордера снизу и слева. ТОЛЬКО В FF!
Причина связана с border-collapse: collapse; но и если тёмный фон у первых ячеек убираю проблема исчезает тоже.
Смотрю на расположение бордюра он почему то на пиксель левее (ширина больше самого элемента). От контента не зависит. В чём проблема понять не могу

Answer 1

[Евгений Петров]

Нужно просто убрать. Всё равно для Firefox это бессмысленно.

.b-rates__modal .modal__box tbody tr:nth-child(3) {
	position: relative;
}

Comments

[Анна Бакурова]

А почему глюк то? Как это связано и почему на этом элементе?

[Анна Бакурова]

Чёрт Я поняла

[Анна Бакурова]

Вот дурында))

[Евгений Петров]

Ну я не знаю, зачем вообще на TR стоит относительное позиционирование. В Firefox это смысла не имеет — только сама таблица может быть контейнером для позиционируемых элементов.

А как связана отрисовка рамок для перекрывающихся ячеек (в частности visual formatting model, stacking context) — не могу точно ничего сказать, не изучал алгоритм Gecko, но однозначно эти алгоритмы простыми точно не назовёшь:)

[Анна Бакурова]

Евгений Петров: Тут поставила эту строку чисто случайно это свойство должно было стоять не диве в этой строке

[Евгений Петров]

Анна Бакурова: Да я понимаю:) На системное правило не очень похоже (иначе бы ты поставила что-то типа nth-last-child()). Скорее на черновое в процессе вёрстки, а потом случайно оставшееся.

[Анна Бакурова]

Евгений Петров: Не там с таким дизайном стоит много nth-child так как дизайн кривой и логики в нём нет. Вот Я паддинги так с психа и выставляю через nth-child, пиксель перфект как никак . А эта строка вообще чудо какое-то!
Наверно вспомнила... похожее свойство было для первой и последней строки третьих элементов... а тут оно как появилось сложно сказать...

[Анна Бакурова]

Евгений Петров: кстати про первую и последнюю строки - третий элемент. Там стоит тоже posr для тех before и after. Как бы сверстал их?
Чтобы было понятнее это верхняя часть и нижняя рамочки красной. Просто в ФФ она опять позиционируется не так как в других из за border

[Евгений Петров]

Убрал бы
left: -5px;
и поставил
margin: 0 0 0 -34px;

[Евгений Петров]

Это навскидку. А если бы изначально делал, то не знаю. Тут думать надо, а я не умею...

[Анна Бакурова]

Евгений Петров: margin-left: -45px;
40 = padding
5 = border-left

[Евгений Петров]

Ну тебе виднее:) Хотя вот я вижу 29 пикселей отступ и 2 пикселя рамка. Добавляем разницу в толщине рамок и...

[Анна Бакурова]

Евгений Петров: это вертикаль а не горизонталь наверно

[Анна Бакурова]

Евгений Петров: ааа или у тебя разрешение маленькое) точно... Там же стили такие на меньшие разрешения

[Евгений Петров]

Ань, хорош троллить:) Ну ты же поставишь нужные размеры...
Я просто к тому, что если нет возможности или необходимости позиционировать от родителя (ну вот нет у родителя position:relative), то просто используем margin и вуаля — profit:)

[Евгений Петров]

У меня консоль справа открыта. Видимо поэтому.

[Анна Бакурова]

Евгений Петров: да Я не троллю) Я просто в отпуске, писала код этот неделю назад в 4 утра. Сейчас начальник написал что баг в FF вот и вспоминаю. Мне теперь это нужно написать человеку который за меня делает. И да Макс если ты это читаешь, то только попробуй переверстать это divами вместо таблицы.
А то ты тут написал что только у таблицы должно быть позиционирование но ни у td и th вот он и хочет переделать дивами. У меня от этого симантическая истерика начинается

[Евгений Петров]

Макс, учись использовать все возможности абсолютного позиционирования и значения auto.
И не смей губить работу Ани!) А то она тебе задницу надерёт.

[Анна Бакурова]

Евгений Петров: ахахахахаха)) ну так это норм же для td и th позиционирование выставлять для внутр элементов?
Я понимаю что для tr это не нормально, но а для td и th? Может Я что то не понимаю?

[Евгений Петров]

В FF ни строки, ни для ячейки не могут предоставлять контейнер для абсолютно позиционируемых элементов.

[Анна Бакурова]

Евгений Петров: то есть лучше не позиционировать before и after относительно ячейки?

[Анна Бакурова]

Евгений Петров: и ещё маленький вопрос. Ты препроцессоры используешь?

[Евгений Петров]

Да, не нужно позиционировать. Только сдвигать. И нет, к стыду своему не использую. Хватает Emmet.

[Анна Бакурова]

Евгений Петров: отлично спс за совет)
Про препроцессоры спросила, потому что сейчас спорю со знакомым по поводу зависимостей
типа
@w: 10px;
@h: 20px;
brd: 2px;

width: @w;
height: @h;
border-width: brd;
position: absolute;
top: 50%;
left: 50%;
margin: -(@h + @brd)/2 0 0 -(@w + @brd)/2;

и т д... У детей они тоже могут использоваться и там может быть уравнение сложнее (в зависимости от макета)

Так вот так как у меня всё через переменные то Я меняю одну переменную и везде оно меняется, где нужно. + нужна в комментариях отпадает.

Он говорит мол Я запутываю, хотя по мне без переменных незакомменченный код куда загадочнее

[blik3230]

Ну почти так, я говорю что все должно быть в меру(как на твоем упрощенном примере))), а когда открываешь такое:
.b-pages__b-applicability {
background: @white;

color: @white;

text-align: center;

.b-wrap {
position: static; //I should stretch b-parallax-bg block,
// but if I still position: relative b-parallax-bg don't
// stretch by 100%
}

.b-content__header {
margin-bottom: 51px;

.md-desk_min({
margin-bottom: 14px;
});

.h1 {
margin-bottom: 15px;

color: @white;

.md-desk_min({
margin-bottom: 13px;
});
}

p {
width: 590px;

margin: 0 auto;

line-height: 1.6;
letter-spacing: .0125em;

.md-desk_min({
width: 470px;
});
}
}
}

.l-applicability-text-info {
min-height: 190px;

.md-desk_min({
min-height: 145px;
});

li {
display: none;

&.active {
display: block;
}
}
}

.l-applicability-nav {
@ml: 75px;
@ml_md-desk_min: 56px;

@w-icon: 105px;
@w-icon_md-desk_min: 85px;
@h-icon: 105px;
@h-icon_md-desk_min: 85px;
@brd_w-icon: 2px;

@w-icon_before_hover: 240px;
@h-icon_before_hover: 240px;

margin: 0 0 104px -@ml;

.md-desk_min({
margin: 0 0 37px -@ml_md-desk_min;
});

.b-inline(~'li');

li {
margin-left: @ml;

cursor: pointer;

.pos-image(5; 1; 0; 0; @w-icon; 5px; 2px; ~'.icon');

.md-desk_min({
margin-left: @ml_md-desk_min;

.pos-image(5; 1; 0; 0; @w-icon_md-desk_min; 5px; 2px; ~'.icon');
});

header {
opacity: .8;

transition: opacity @anim_time-l-applicability__icon;
}

&:hover {

header {
opacity: 1;
}
}

&.active {

header {
opacity: 1;
}

.icon {
border-color: @brand-warning;

&:before {
width: @w-icon_before_hover;
height: @h-icon_before_hover;

top: -( @h-icon_before_hover - (@h-icon - @brd_w-icon) )/2;
left: -( @w-icon_before_hover - (@w-icon - @brd_w-icon) )/2;
visibility: visible;

border-color: transparent;

transition: all 1s;
}
}

p {
opacity: 1;

padding: 22px 0 0 0;
}
}

.icon {
brd: 2px;

width: @w-icon;
height: @w-icon;

position: relative;
z-index: 1;

margin: 0 auto 14px;
border-radius: 50%;
border: brd solid transparent;

transition: border-color .2s;

.sprite();

.md-desk_min({
width: @w-icon_md-desk_min;
height: @w-icon_md-desk_min;

margin-bottom: -1px;
});

&:before {
content: '';

width: @w-icon;
height: @h-icon;

position: absolute;
top: -@brd_w-icon;
left: -@brd_w-icon;
z-index: 0;

visibility: hidden;

border: 1px solid @white;
border-radius: 50%;

transition: all step-start;
}
}
}

p {
opacity: .8;

margin-bottom: 0;
padding: 0 0 42px 0;

font-size: @font-size-small;
font-weight: 500;
letter-spacing: .016em;

text-transform: uppercase;

transition: padding 1s,
}
}
руки опускаются.
P.S. Это Максим, и я все читал))

Answer 2

[Андрей Саныч]

не мудрите с этими th. Поставьте в боковых колонках везде td и все станет красиво и на свои места

Comments

[Евгений Петров]

Какая разница между TD и TH в контексте формирования рамок?

[Андрей Саныч]

Евгений Петров: никакой. Но для ФФ видать есть. Я поменял th на td и все бордеры появились. Не исключаю, что стили криво написаны

[Анна Бакурова]

Андрей Саныч: эмм... возможно старомодна, но СЕМАНТИКА!

[Евгений Петров]

Андрей Саныч: Вы увидели рамки только лишь потому, что в TD не прописан фон, а в TH прописан. А вовсе не потому, что FF различает эти элементы при формировании рамок.

Анна Бакурова: Скорее всего, в разных браузерах разный порядок stacking context при наложении рамок таблицы. Просто фон от TH относительно позиционируемой строки перекрывает рамку TH в ниже расположенной строке.

[Андрей Саныч]

Анна Бакурова: та не, семантика не старомодна))) тогда стили нужно пилить

[Анна Бакурова]

Андрей Саныч: капитан))) ок)) уже разобрались...

[Анна Бакурова]

Евгений Петров: это Я уже поняла про перекрытие (когда смотрела границы элемента), но не понимала почему, теперь всё ясно стало