Проблема с <div>границей вокруг таблицы в FireFox - PullRequest
Новая
       12

Проблема с <div>границей вокруг таблицы в FireFox

1 голос
/ 14 сентября 2009

Я ожидаю, что этот код будет отображать рамку вокруг таблицы. Это происходит в Internet Explorer, но не в Firefox. В Firefox он отображает горизонтальную линию над таблицей. Если я добавлю что-нибудь еще, например <br /> в пределах div граница отображается правильно. Это также работает, если я удаляю атрибуты выравнивания.
В чем причина такого поведения? 

<body>  
  <div style="border-style: solid; border-width: 1px;  
    border-color: #A8A8A8; width: 100%">
    <table align="left" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center">
          Sample Text<br />
        </td>
      </tr>
    </table>
  </div>
</body>

Ответы [ 2 ]

6 голосов
/ 14 сентября 2009

В таблице используется устаревший атрибут align.Это было заменено на свойство CSS float и имеет тот же эффект.

Плавающие элементы, по умолчанию, не влияют на высоту их контейнера (я считаю, что эта функция не правильно реализована в IE, еслиDoctype запускает режим Quirks, это, вероятно, учитывает разницу в рендеринге, который вы видите. Добавьте стандартный режим, запускающий Doctype, чтобы избежать этого и многих других несоответствий между браузерами.)как показано в http://complexspiral.com/publications/containing-floats/

См. http://www.ejeliot.com/blog/59 для ряда способов заставить контейнеры расширяться для охвата плавающего контекста.Я нахожу переполнение: скрытый метод, как правило, является лучшим вариантом.

0 голосов
/ 14 сентября 2009

Поставьте это после вашего тега 

<div style="clear:left;"></div>

Это все исправит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...