Table with border-collapse 在 Chrome 和 Firefox 中的工作方式不同

Question

请在 Chrome 和 Firefox 中测试 this fiddle。他们的工作方式不同。在 Firefox 中，背景位于正确的位置（从文本开始就够了）。但在 Chrome 中，背景低于预期水平。

我找到了答案。但它对我不起作用。我无法将 table 行设置为 display: block

而且我无法将顶部内边距设置为 tds。因为在 tds 中有一个绝对位置的元素，它占据了 td.

的全高

最终目标是将背景位置设置到顶部并保持每个垂直之间的距离td。

感谢您的帮助。

table {
    border-collapse: separate;
    width: 100%;
}
tr {
    background: url(http://dummyimage.com/10x5/000/fff.jpg) repeat-x left top;
}
td {
    border-top: 30px solid transparent;
}

<table>
 <tbody>
  <tr>
   <td>tr1 td1</td>
   <td>tr1 td2</td>
   <td>tr1 td3</td>
  </tr>
  <tr>
   <td>tr2 td1</td>
   <td>tr2 td2</td>
   <td>tr2 td3</td>
  </tr>
 </tbody>
</table>

Answer 1

默认情况下，background-origin 属性设置为 padding-box。

问题似乎是由于在表格布局中确定填充框的差异造成的。

解决方案是将属性设置为 border-box:

tr {
  background-origin: border-box;
}

table {
  border-collapse: separate;
  width: 100%;
}
tr {
  background: url(http://i.stack.imgur.com/P4wQ9.jpg) repeat-x left top;
  background-origin: border-box;
}
td {
  border-top: 30px solid transparent;
}

<table>
  <tbody>
    <tr>
      <td>tr1 td1</td>
      <td>tr1 td2</td>
      <td>tr1 td3</td>
    </tr>
    <tr>
      <td>tr2 td1</td>
      <td>tr2 td2</td>
      <td>tr2 td3</td>
    </tr>
  </tbody>
</table>

Table with border-collapse 在 Chrome 和 Firefox 中的工作方式不同

Table with border-collapse works differently in Chrome and Firefox

css

google-chrome

css-tables