Question

请在Chrome和Firefox中测试this fiddle。他们的工作不同。在Firefox中，背景位于正确的位置（文本顶部足够）。但在Chrome中，背景低于预期水平。

我找到了答案here。不，它对我不起作用。我无法将表格行设置为display: block

我无法将顶部填充设置为td。因为在td s内有一个绝对位置的元素，其高度为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>

带有border-collapse的表在Chrome和Firefox中的工作方式不同

1 个答案: