IE6 дополнительная обивка снизу

Question

У меня есть тег div, стилизованный под CSS. Я установил отступ в 10px (padding: 10px), он работает точно так же, как я хотел в Firefox и IE7, но в IE6 он добавляет дополнительный отступ внизу (я думаю, около 2-3px). Кто-нибудь имеет представление о том, что здесь происходит?

[обновление]

Я только что заметил это, у тега div, о котором я говорю, есть background-image. Когда я удалил фоновое изображение, лишние отступы внизу исчезли. Есть идеи?

[еще одно обновление, пример кода]

Вот CSS, примененный к моему тегу div:

.user-info{
    margin-top: 20px;
    margin-right: 20px;
    padding: 10px;
    background-image: url("../img/user_panel_bg.png");
    float:right;
    border: 1px #AAAAAA solid;
    font-size:12px;
}

Answer 1

Есть ли изображение в вашем div? Если изображение есть, в IE 6 есть ошибка, которая может привести к появлению пустого пространства внутри элемента div для создания дополнительного отступа внизу

Дополнительное заполнение отображается с

<div>
<img src="myimage.jpg">
</div>

Дополнительные отступы не отображаются при изменении HTML на

<div><img src="myimage.jpg"></div>

Answer 2

Я бы настоятельно рекомендовал взглянуть на сайт positioniseverything.net и узнать о проблемах и обходных путях в IE. Взгляните на раздел «Холли хак» - я думаю, вы найдете ответ там.

[edit - добавлено] посмотрите здесь для проблемы, объяснения и исправления в 3px

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

Answer 3

Вы пытались скрыть переполнение DIV? overflow:hidden;

Изменить: Вы также можете попробовать display: inline;, если вы говорите о горизонтальном толчке.

Answer 4

Убедитесь, что размер шрифта не создает проблемы. Даже без текста внутри элемента контейнера (скажем, для нижнего колпачка на растягиваемом контейнере) IE6 будет по-прежнему изменять размер поля не меньше размера шрифта (даже с явным заданным значением высоты).

Так, например, если у вас есть HTML:

<div class="box">  
  <h1>Heading</h1>  
  <p>This is the main content.</p>  
  <div class="bottom"></div>  
</div>

... вам понадобится этот CSS:

<style type="text/css">
  .box {
    background: url(bg-middle.jpg) repeat-y;
  }
  .box h1 {
    background: url(bg-top.jpg) no-repeat;
  }
  .box .bottom {
    background: url(bg-image.jpg) no-repeat;  /* bottom cap image */
    height: 10px;                             /* height of your bg image */
    font-size: 1px;                           /* for IE6 */
  }
</style>

Answer 5

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

Answer 6

потенциально свойства 'margin' или 'border'?