первый и последний ребенок с IE8 - PullRequest
Новая
       17

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

60 голосов
/ 12 января 2012

У меня есть несколько 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.

Я знаю, что проблема связана сfirst-child и last-child, но я не эксперт.

Есть идеи, как это исправить?

PS: я добавил <!doctype html> поверх моего HTML-документа, но ничегоизмененное.

Ответы [ 3 ]

68 голосов
/ 12 января 2012

Если в вашей таблице только 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, , как предложено Джеймсом Аллардисом .

34 голосов
/ 12 января 2012

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

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

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

3 голосов
/ 04 апреля 2014

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

...