CSS3 PIE конфликтует с :first-child

Я использую CSS3 PIE, чтобы добавить поддержку border-radius в IE8 и более ранние версии, и это конфликтует с селектором :first-child.

По сути, у меня есть три элемента списка, плавающие слева. У каждого есть левое поле 10 пикселей, кроме первого, которое я установил на 0:

#steps li {
    border-radius: 10px;
    float: left;
    margin-left: 10px;
}
#steps li:first-child {
    margin-left: 0;
}

Когда я применяю PIE к селектору #steps li, чтобы добавить поддержку радиуса границы, первый элемент списка перерисовывается с левым полем, установленным обратно на 10px, как будто селектора #steps li:first-child там нет. Я могу сказать, что это связано с тем, что PIE перерисовывает элемент, потому что он ненадолго мигает в правильном положении, а затем смещается более чем на 10 пикселей через долю секунды.

Я пытался применить PIE к обоим селекторам, но это не имеет значения, и я не могу найти ничего, относящегося к first-child на форумах поддержки PIE.


css internet-explorer css-selectors css3pie
person daGUY    schedule 04.10.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Загляните на официальный форум по адресу форумы CSS3 PIE - IE :first/last- дочерний элемент перезаписан

Конечным результатом является то, что вам нужно добавить

#steps css3-container:first-child + li, 
#steps li:first-child {
    margin-left: 0;
}
person Gabriele Petrioli    schedule 04.10.2011
comment
Поскольку CSS3 PIE в любом случае существует, возможно, даже включите селекторы CSS3 и используйте #steps li:first-of-type;) - person BoltClock; 04.10.2011
comment
О, это не так? Это отстой :( - person BoltClock; 04.10.2011
comment
@BoltClock chuckle.. может быть, вы путаете его с ie-css3.js? - person Gabriele Petrioli; 04.10.2011
comment
Я не был - я надеялся, что PIE тоже будет полифиллировать селекторы. Но эй, Selectivizr выглядит круто. - person BoltClock; 04.10.2011