Первый ребенок и последний ребенок с IE8

У меня есть 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: я добавил <!doctype html> поверх моего html-документа, но ничего не изменилось.

Ответ 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; 
}

В противном случае вам придется использовать библиотеку селектора JS, такую как jQuery, или вручную добавить класс к последнему td, как было предложено Джеймсом Аллардисом.

Ответ 2

Так как :last-child является псевдоклассом CSS3, он не поддерживается в IE8. Я полагаю, что поддерживается :first-child, как определено в спецификации CSS2.1.

Одним из возможных решений является просто дать последнему ребенку имя класса и стиль этого класса.

Другим вариантом будет использование JavaScript. jQuery делает это особенно просто, поскольку он предоставляет псевдо-класс :last-child, который должен работать в IE8. К сожалению, это может привести к появлению неровного содержимого во время загрузки DOM.

Ответ 3

Если вы хотите использовать селектор CSS3, но должны поддерживать старые браузеры, я бы предложил использовать polyfill, например Selectivizr.js