Question

我昨天发布了this question。

我的padding和display CSS属性未在IE中的tr元素上生效。我认为这是一个IE漏洞，但这是我可怕的标记，这是责任。

许多人指出padding和display是tr元素的无效CSS属性。

为什么然后，他们在Chrome中工作？

如果我将下面的CSS放在tr元素上，那么CSS就会生效。

    tr{ 
        display: block;
        padding: 10px;
      }

这是Chrome的错误，或者浏览器是否最好能够理解写得非常好的CSS？

Answer 1

考虑到你所关联的问题，正如接受的答案所说的那样

这不仅是IE 8+问题，而且在任何浏览器中都无效。

您不能在表格行中填充。相反，你需要添加   你的td中的填充样式。

我无法看到你在代码中追加任何td所以我可以   修改那个。

因此，请确保在您的td中添加填充样式而不是tr。

并且确保将td放入你的tr并做其他事情   边界和你想要的任何东西。

现在按照这个问题写的，你是tr，即：

tr{ 
        display: block;
        padding: 10px;
    }

不再是table-row，因为它使用css显示为块（并且这可以使用display属性），因此必须能够填充，所以没有问题

Answer 2

display属性可以应用于tr，但为了让tr的行为像表格行，它必须是display: table-row。更改显示值将阻止其按预期工作，并导致表格布局出现意外（但consistent）副作用。也就是说，将在表中的元素周围创建一个匿名表行（和单元格），并且元素本身将以不同方式布局。

padding属性确实不适用于表行;你可以在definition given by the spec：

中看到这一点

适用于：除table-row-group，table-header-group，table-footer-group，table-row，table-column-group和table-column

但是，你在这里做的是将tr转变为一个显然支持填充的块框，这就是Chrome能够呈现这两个属性的方式。如果您未更改其display，则填充不应适用。如果确实如此，则将是一个错误。

如果IE无法将元素呈现为块框，那么这可能也是一个错误，原因可能是匿名表对象的执行不佳。

Answer 3

你不能自己设置TR的样式，但你可以在TR标记内给TD一个样式，如：

tr td {padding-top: 10px; padding-bottom:10px}

然后，你可以这样做：

tr td:first-child {
 padding-left: 10px;
}

tr td:last-child {
 padding-right: 10px;
}

为什么填充和显示CSS属性适用于Chrome中的tr元素？

3 个答案: