IE6 дополнительная прокладка снизу
У меня есть тег div, стилизованный через CSS. Я установил отступ на 10 пикселей (отступ: 10 пикселей), он работает так же, как я хотел в Firefox и IE7, но в IE6 он добавляет дополнительный отступ внизу (около 2-3 пикселей, я думаю). Кто-нибудь знает, что здесь происходит?
[Обновить]
Я только что заметил это, тег div, о котором я говорю, имеет фоновое изображение. Когда я удалил фоновое изображение, лишнее заполнение внизу исчезло. Есть идеи?
[другое обновление, образец кода]
Вот 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;
}
То же. Для этого может быть много причин (IE 6 имеет довольно причудливую коробочную модель, которая, вероятно, является причиной этого, но мы не можем сказать об этом без кода).
У меня возникла такая же проблема с заполнением и фоновым изображением. Я никогда не мог решить это. Моя работа заключалась в том, чтобы удалить и заполнить и вместо этого использовать рамку (которая сработала, потому что она была белым на белом) ... Тайна ...
Ответы 6
Я настоятельно рекомендую взглянуть на сайт positioniseverything.net, где освещаются проблемы IE и обходные пути. Загляните в раздел о хакерских приемах Holly - я думаю, вы найдете там ответ.
[править - добавлено] посмотрите здесь на проблему 3px, объяснение и исправление
статья модели коробки sitepoints также предлагает хорошее представление о настройках окна и различиях в браузере.
Вы пробовали скрыть переполнение DIV? overflow:hidden;
Обновлено: вы также можете попробовать display: inline;, если вы говорите о горизонтальном толчке.
потенциально "маржа" или "граница" свойства?
В вашем div есть изображение? Если есть изображение, значит, в IE 6 есть ошибка, из-за которой пробелы в div могут создавать дополнительные отступы внизу.
Дополнительные отступы появляются с
<div>
<img src = "myimage.jpg">
</div>
Дополнительное заполнение не отображается, когда вы меняете свой HTML на
<div><img src = "myimage.jpg"></div>
Год спустя, но +1 от меня :-) Возможно, самая дурацкая ошибка IE6, с которой я когда-либо сталкивался. Та Кибби!
3 года спустя и +1 от меня. То же самое и в IE8.
Вы также можете посмотреть что-то вроде Таблица стилей сброса CSS, которое позволит вам установить значения по умолчанию, которые должны быть в разумной степени согласованными во всех браузерах.
Убедитесь, что размер шрифта не создает проблемы. Даже при отсутствии текста внутри элемента контейнера (например, для нижней крышки растягиваемого контейнера) 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>
Можете ли вы отредактировать этот пост, включив в него образец кода