Псевдоэлементы игнорируются FireFox - PullRequest
Новая
       9

Псевдоэлементы игнорируются FireFox

0 голосов
/ 28 марта 2012

Дамы и господа,

В течение довольно длительного времени я использовал следующую технику CSS, чтобы разбить float путем очистки: 

{
    display: block;
    content: ".";
    clear: both;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
}

Я бы тогда назначил этот наборправил для :before или :after псевдоэлементов (или, в настоящее время, кажется, ::before и ::after, хотя они должны отступить от праймера).Логически это точно то же самое, что создание элемента блока до или после элемента, с clear:both, overflow:hidden и без особого семантического значения для браузера.

Это позволило мне разбитьfloat, не вводя в код вводящие в заблуждение / неоднозначные и длинные HTML-элементы (например, <div class="clear"></div>), но при этом мой неиспользуемый родительский элемент должен быть приспособлен для всех плавающих дочерних элементов.Тем не менее, похоже, что во многих случаях это больше не работает в FireFox.Вопрос: почему ..?

Также кажется, что нет способа проверить эти псевдоэлементы на боковой панели, чтобы увидеть, что на самом деле происходит.

Спасибо и С уважением

1 Ответ

1 голос
/ 28 марта 2012

Используйте это: 

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

Это кросс-браузер и работает.

Пример: 

<div class="clearfix">
   <div style="float:left;">1</div>
   <div style="float:left;">2</div>
   <div style="float:left;">3</div>
   <div style="float:left;">4</div>
</div>

Добавлено style="float:left;", чтобы показать, что они плавающие, но не использовать встроенный CSS. Нет необходимости в дополнительной разметке только для очистки.

...