IE 6-7 не соблюдает отступы / поля

Question

У меня есть нижний колонтитул. У меня есть 3 столбца с отступом: 10px 20px 0px;

В тех у меня есть несколько заголовков (h1 / h2) с полем top: 10px;

Это выглядит нормальново всех браузерах, кроме IE 6 и 7

В IE 6 и 7 заголовки размещаются в 10px от верхней части контейнера.(верхний отступ отсутствует, но левый / правый отступ в порядке)

Может кто-нибудь сказать мне, почему ??

http://www.hr -relocation.com / test.html

.footercolumn {
    width: 260px;
    height: 170px;
    padding: 10px 20px 0px;
    text-align: left;
    overflow: hidden;
    background: url(../gfx/footerbg.gif) no-repeat top left;
    float: left;
}

.footercolumn h1, .footercolumn h2, .footercolumn h3 {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.2em;
    font-weight: bold;
    color: #c5037b;
    display: block;
}

Answer 1

Спасибо за все ответы и пожелания ...

Работая усердно всю ночь, я придумал решение, которое работало бы для всех IE: -)

добавив <div class="clearall"></div> в топконтейнера div с этим css решил проблему

clear: { both !important; display: block !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; width: 0 !important; }

Answer 2

CinqoTimo имеет отличный ответ на эту проблему.

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

Я заметил, что если a имеет div / контейнеры поверх друг друга (вышеуказанный контейнер с нижним полем 1em, нижний контейнер с верхним полем 1em, оба контейнера имеют одинаковый стиль, т.е.

#imageDiv {
margin:1em;
}

) тогда IE7 даст только 1 контейнер наценке. Таким образом, вместо пробела 2em между верхним и нижним контейнерами будет пробел 1em.

Поэтому после этого я решил попробовать и просто назначить нижние поля для контейнеров, изображений и т. Д. Например:

#imageDiv {
margin-top:0em;
margin-right:1em auto;
margin-bottom:2em;
margin-left:1em auto;
}

Если вам нужно пустое пространство над вашим самым верхним контейнером, так как над ним не будет других контейнеров, было бы хорошо назначить для него размер margin-top или рассмотреть возможность добавления отступа к телу, т.е. *

body {
padding-top:1em;
}

Answer 3

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

Для получения дополнительной информации см. Ошибка модели окна Internet Explorer .

Answer 4

Добро пожаловать в веб-разработку - комментарий Роба полностью правдив, люди, использующие IE 6 и 7, не должны быть допущены в интернет. Вы можете перейти Здесь , чтобы увидеть подробное объяснение ошибок IE.

Прежде чем вы начнете рвать свой стиль, позвольте мне предложить кое-что: Условные таблицы стилей

Вы применяете что-то вроде этого в разделе html HEAD:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Это позволяет вам нацеливать IE с дополнительным CSS. Прочитайте ссылку, так как она становится более мелкозернистой - и это лучший путь для решения проблем, с которыми вы столкнулись. Самый простой способ - убедиться, что ссылка на ваш CSS-файл только для IE идет ПОСЛЕ других ваших стилей и обычно содержит только исправления (если это не сработает, а затем переопределите элемент). Например, если у вас есть div ".header", который полностью определен в вашем обычном CSS-файле, но в IE отображается слева на 10px, ваша таблица условных стилей IE будет содержать:

.header{
margin-left: 10px;
}

Это будет добавлено к существующему CSS и исправит вашу проблему ..

Удачи ..