IE7 - абсолютное смещение позиционирования отличается от Firefox?

Question

Я убираю работу другого разработчика, который, кажется, выполнил дрянную работу с CSS.

На странице есть основной div "wrapper", а внутри это логотип и изображения длянавигация.Изображения используют "position: absolute" и используют CSS свойство "top" для их смещения.Однако Firefox и IE, похоже, начинают смещение с другой точки, то есть логотип находится примерно на 100 пикселей выше, чем должен быть в IE.

Это ошибка IE CSS или известная вещь?

Пример в вопросе: http://barry.cityjoin.com/mccamb/

Answer 1

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

Небольшой рабочий пример:

<style>
    .wrapper
    {
        position: relative;
        height: 100px;
        width: 800px;
    }
    .absoluteLogo
    {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 60px;
        width: 80px;
    }
    .absoluteElement
    {
        position: absolute;
        top: 80px;
        left: 320px;
        height: 20px;
        width: 80px;
    }
</style>

<div class="wrapper">
    <div class="absoluteLogo">Logo</div>
    <div class="absoluteElement">Element</div>
</div>

Другой возможностью было бы позиционирование абсолютных элементов с использованием полей:

<style>
    .wrapper
    {
        height: 100px;
        width: 800px;
    }
    .absoluteLogo
    {
        position: absolute;
        margin: 10px 0 0 10px;
        height: 60px;
        width: 80px;
    }
    .absoluteElement
    {
        position: absolute;
        margin: 80px 0 0 320px;
        height: 20px;
        width: 80px;
    }
</style>

<div class="wrapper">
    <div class="absoluteLogo">Logo</div>
    <div class="absoluteElement">Element</div>
</div>

Результат одинаков и должен работать во всех браузерах.