Из-за чего такое поведение тега caption?

Question

[Сергей Сергеевич]

Всем привет.
Верстаю таблицу, делаю ей относительное позиционирование, а следом идущему тегу caption выставляю абсолютное позиционирование, белый фон, и отрицательным верхом загоняю его на рамку таблицы. В мозилле все нормально, в хроме беда. Но можно вылечить если исправить :

border {
border-collapse: collapse;
}

на

border {
border-collapse: separate;
}

Почему так?

Мозилла:



Хром:

Comments

[Виталий Инчин ☢]

Залейте весь код на jsfiddle.net

[Сергей Сергеевич]

Залил и там все ок =(
https://jsfiddle.net/q5xrj7fe/4/
А что у меня перебивает, непонятно.

Answer 1

[Владислав]

А вам принципиально задавать рамку с заголовком именно таким способом? Таблицы очень специфичны и ведут себя при нестандартном подходе непредсказуемо.

Есть к примеру, кроссбраузерный тег специальный
htmlbook.ru/html/legend

<fieldset>
  <legend>Стоимость аренды прицепа МЗСА</legend>
<table>
...
</table>
</fieldset>

css
fieldset {
  border: 5px solid #3A89C9;  
}
legend {
  padding:0 10px;
}

Еще вариант обернуть таблицу дивом с position - relative. Потом тег h3 например с абсолютным позиционированием и потом таблица

Comments

[Сергей Сергеевич]

Забыл про легенд, завтра сделаю с ним! Спасибо!