Проблема с CSS-исправлением в Firefox 2 и SeaMonkey - PullRequest
Новая
       12

Проблема с CSS-исправлением в Firefox 2 и SeaMonkey

0 голосов
/ 09 августа 2009

Я использую 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 (зеленый) отделен большим полем от остальной части страницы.

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

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

Ответы [ 4 ]

1 голос
/ 10 августа 2009

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

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

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

0 голосов
/ 02 августа 2010

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

0 голосов
/ 09 августа 2009

Я посмотрел на него с помощью браузерных снимков, и я действительно очень старался выяснить, в чем разница между ним в 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;
 }
0 голосов
/ 09 августа 2009

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

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

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

...