Почему мое clearfix не работает в Firefox?

Question

Это сайт:

http://m2c.dreamhosters.com/wordpress/

clearfix:

.clearfix:after, 
.sub-menu:after, 
.sub-menu:after li { 
    content: ""; 
    display: table; 
    clear: both; 
} 

работает полностью OK в Chrome. Но в Firefox не даже отображаться в элементе инспектора (и делает родители сжиматься деление с

Как я могу решить эту проблему

Answer 1

Попробуйте это:.?

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

Это тот, который используется в HTML5Boilerplate.Я не могу объяснить, как он отличается от вашего, но этот код был рассмотрен многими людьми, и он используется в основном. Вряд ли вы найдете его неудачным.

Answer 2

Как упоминалось в комментариях, Firefox отбрасывает ru le, потому что .sub-menu:after li в вашем селекторе недействителен. В CSS2.1 и Selectors 3 только один псевдоэлемент может отображаться максимум на комплексный селектор и должен находиться в самом конце селектора. При обнаружении неверного селектора в наборе правил браузер must drop the entire ruleset. Вот почему он не появляется в инспекторе.

Чтобы это исправить, либо удалить селектор обижая, как представляется, ошибка:

.clearfix:after, 
.sub-menu:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Или, если вы имели в виду применить :after псевдо-элемент .sub-menu li, переместить псевдо-элемент, как так :

.clearfix:after, 
.sub-menu:after, 
.sub-menu li:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Итак, вместо того, чтобы спросить, почему этот CSS не работает в Firefox, реальный вопрос: почему Chrome принимает его? Скорее всего, потому, что WebKit (и, возможно, Blink), как известно, более мягкий, когда дело доходит до разбора псевдоэлементов, возможно, из-за того, что в нем используются некоторые нестандартные функции, которые требуют активного нарушения спецификации. Цитирую this other answer of mine:

Возможно, корень проблемы лежит в самом факте, что вы пытаетесь добавить генерируемый контент другим псевдо-элементов, которые снова, кажется, работает в WebKit браузерах по какой странной причине. В отличие от вышеописанной проблемы с сгенерированным содержимым в замещаемых элементах, текущие спецификации Selectors 3 и предстоящие спецификации Selectors 4 очень понятны: вы не должны иметь более одного псевдоэлемента для сложного селектора. Разумеется, WebKit печально нарушал различные правила, когда речь заходит о внедрении псевдоэлементов, поэтому в ретроспективе меня не удивляет, что WebKit испортил это.

В любом случае, реальный вывод заключается в том, что реализация контента, созданного с CSS, крайне низок за пределами текущего стандарта CSS2.1 + Selectors, под которым я подразумеваю сгенерированный контент для замещенных элементов, таких как input и progress, и вложение псевдоэлементов в один селектор.