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

时间:2015-09-11 22:19:34

标签: css css3 google-chrome css-tables

请在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>

1 个答案:

答案 0 :(得分: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>