Question

我有一些css用于调整表格中的内容。

这是：

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

适用于Firefox，Safari和Chrome，但不适用于（目前）IE8。

我知道问题来自第一个孩子和最后一个孩子，但我不是专家。

我知道如何解决这个问题吗？

PS：我在我的html文档上添加了<!doctype html>，但没有任何改变。

Answer 1

如果您的表格只有2列，您可以轻松地使用相邻的兄弟选择器到达第二个td，IE8支持:first-child：

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

否则，您必须使用jQuery这样的JS选择器库，或者手动将类添加到上一个td，as suggested by James Allardice。

Answer 2

由于:last-child是CSS3伪类，因此IE8不支持它。我相信支持:first-child，因为它在CSS2.1规范中定义。

一种可能的解决方案是简单地给最后一个孩子一个班级名称和风格。

另一种方法是使用JavaScript。 jQuery使这个特别容易，因为它提供了一个:last-child伪类，它应该在IE8中工作。不幸的是，当DOM加载时，这可能会导致无格式内容的闪现。

Answer 3

如果您想继续使用CSS3选择器，但需要支持旧版浏览器，我建议您使用polyfill，例如Selectivizr.js

IE8的第一个孩子和最后一个孩子

3 个答案: