Проблема с 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, поэтому я не могу просто проигнорировать проблему. Я пытался удалить или настроить некоторые части CSS-кода clearfix, но независимо от того, что я делаю, таймер DIV (зеленый) отделен большим полем от остальной части страницы.

У кого-нибудь есть идеи как это решить?

Обновление 2: Я наконец сдался и поставил тег TABLE и решил проблему за несколько минут. Поэтому не пытайтесь заглянуть в исходный код HTML - проблема больше не очевидна.

Источник

4 ответа

Решение

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

Источник

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

Очень просто, если вы укажете родительский переполнение: скрытый и убедитесь, что он имеет "макет" в 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 этой техникой, и ваша проблема должна быть решена.

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

Источник

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

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

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

Источник

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

Хотя, глядя на вашу страницу, почему бы не сделать что-то подобное?

 <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;
 }
Источник
Другие вопросы по тегам