Проблема с очисткой CSS с Firefox 2 и SeaMonkey

Я использую yaml для макета и знаменитого clearfix css, чтобы убедиться, что контейнер с поплавками расширен.

Все отлично работает с Firefox 3, IE6, IE7, IE8, Opera 9 и Google Chrome, но у меня проблема с Firefox 1, Firefox 2 и SeaMonkey. Проблема в том, что контейнер clearfix слишком сильно расширяется, как вы можете видеть на веб-сайте:

http://www.slagalica.tv/game/mojbroj

Вот скриншоты Firefox 2 и Firefox 3 рендеринг.

Обновление: Скриншоты на BrowserShots.org

К сожалению, статистика показывает, что более 10% моих посетителей используют FF2, поэтому я не могу просто игнорировать проблему. Я попытался удалить или изменить некоторые части clearfix CSS, но независимо от того, что я делаю, таймер DIV (зеленый) отделен большим отступом от остальной части страницы.

Есть ли у кого-нибудь идея, как это решить?

Update2: я, наконец, сдался и поместил тег TABLE и решил проблему через несколько минут. Итак, не пытайтесь заглянуть в источник HTML - проблема уже не очевидна.

Ответ 1

Кажется, что это ошибка, и исправлена в более новых версиях. Однако для поддержания совместимости вместо CSS следует использовать таблицы.

Ответ 2

Итак, если вы посмотрите на оригинальную статью, которая продвигает clearfix на positioniseverything, вы заметите, что автор рекомендует, что, поскольку исправление устарело, читателю следует посмотреть статью на сайте. В этой статье сайта указывается метод, который я использую в течение длительного времени.

Очень просто, если вы предоставите родительский переполнение: скрытый и убедитесь, что он имеет "макет" в IE, тогда это очистит внутренние поплавки.


<div id="wrapper">
     <div id="leftcol">
          Text
     </div>
     <div id="rightcol">
         text
     </div>
</div>

а затем соответствующий CSS:


#wrapper{
  overflow:hidden;
  width: 100%;
}
#leftcol{
  float:left;
  width: 50%;
}
#rightcol{
  float:right;
  width: 50%;
}

В приведенном выше примере я использовал width: 100%, чтобы дать макет IE, но вы могли бы легко использовать zoom: 1 или height: 1%, если хотите.

Попробуйте заменить clearfix этой техникой, и ваша проблема должна быть решена.

Что следует учитывать в этой технике, будьте осторожны с вашей внутренней шириной, иначе вы можете обрезать, и важно переопределить оболочку в таблице стилей печати как переполнение: видимо, иначе она будет печатать только первую страницу. но я успешно использовал этот метод в производстве уже много лет, и у меня никогда не было неразрешимых проблем с ним.

Ответ 3

clearfix - это просто взлом для ленивого или навязчивого пуриста. Поместите расчистку div, где вам это нужно (внизу вашего div) и продолжайте жизнь.

<div>
   ... floated content ...
   <div style="clear:both"></div>
</div>

BTW. Пурист, претендующий на эту разрывную семантику, неверен. Спецификация HTML не определяет семантического значения для <div>. В худшем случае он смешивает стиль/структуру, но вряд ли это будет проблемой для удаления, когда сайт будет редизайном в будущем, и чистое решение css станет практичным.

Ответ 4

Я посмотрел на него с помощью браузеров, и я очень стараюсь понять, какая разница между ними в FF2, 3 и хром. Я не вижу этого.

Если вы посмотрите на свою страницу, почему бы не сделать что-то в этом направлении?

 <div id='wrapper'>
      <div id="leftcol">
           Text
      </div>
      <div id="rightcol">
          text
      </div>
      <div id="foot">
           text
      </div>
 </div>

И CSS:

 #wrapper{
      min-height:1%; //to fix IE6 floats escaping ancestor div
 }
 #leftcol{
      float:left;
 }
 #rightcol{
     float:left;
 }
 #foot{
 clear:both;
 }