CSS псевдо-класс не будет работать, если нормальный класс установлен из JavaScript под FF - PullRequest
Новая
       12

CSS псевдо-класс не будет работать, если нормальный класс установлен из JavaScript под FF

3 голосов
/ 30 августа 2011

У меня есть p.first_p:first-letter в моей таблице стилей, как я проверил, она хорошо работает, когда в HTML установлен класс first_p. Проблемы начинаются, когда я использую JavaScript, чтобы найти элементы, а затем устанавливаю их класс.

Под Chrome и Opera он работает нормально (мне нужно проверить IE 8 и 9 и FF3).

FF 5.01 изменяет класс, но настройка псевдокласса по-прежнему не влияет на элемент.

Кажется, что FF необходимо «обновить» настройки css элемента, прежде чем псевдо-класс начнет работать, поэтому я сделал довольно грязный обходной путь - скрипт заменяет уязвимый узел его клоном.

Есть ли лучший способ решить эту проблему? Какой-нибудь способ заставить FF пересчитать все, что он знает об узле? Также этого обходного пути недостаточно для IE 7.

Редактировать: да, псевдоэлемент, а не псевдокласс, мой плохой

Ответы [ 3 ]

1 голос
/ 30 августа 2011

Это определенно ошибка. Возможным обходным решением будет изменение стиля элемента display. К сожалению, это необходимо сделать с задержкой после применения предыдущего изменения стиля: 

element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
  element.style.display = '';
}, 0);

Демо: http://jsfiddle.net/pvEDY/3/

1 голос
/ 30 августа 2011

Вы сталкиваетесь с https://bugzilla.mozilla.org/show_bug.cgi?id=8253

0 голосов
/ 30 августа 2011

Можно ли не использовать javascript?

Я предполагаю, что вы применяете first_p к первому абзацу определенных элементов.Можно ли вместо этого использовать селектор: first-child?

Я не уверен, что это сработает, но вы можете попробовать что-то вроде следующего, предполагая, что вы хотите применить это к потомкам divs скласс "copy" 

.copy p:first-child:first-letter{
  color: #abcdef; /* or whatever */
}

это определенно работает , и вам не нужен javascript, кроме дрянного старого IE.

В качестве альтернативы вы можете попробовать это: 

.element p:first-letter{
  font-size: 20px;
}

.element p + p:first-letter{
  font-size: inherit;
}

Этот CSS делает любой абзац, которому не предшествует другой абзац, вводит первую букву в стиле.Это решит вашу проблему?

Подождите, вы хотите, чтобы она работала в Firefox.Попробуйте это: 

.element p:first-of-type:first-letter{
  font-size: 20px;
}

Выбирает первый соответствующий элемент.Песо-элемент first-of-type поддерживается в Firefox, Opera, Chrome и Safari в соответствии с страницей SitePoint для: first-of-type

...