Отсекающий div с отрицательным полем в Internet Explorer

РЕДАКТИРОВАТЬ: вы можете просмотреть страницу здесь: http://websitem.gazi.edu.tr/test/index.html

Я пытаюсь сделать эффект на скриншоте ниже:

Chrome/Firefox вверху. IE 7/8/9 внизу

Первый из Хрома. Firefox показывает то же самое. Но Internet Explorer с 7 по 9 версию показывает вторую картинку.

Моя структура html такова:

<div class="header-menu">
    <div class="container">
        <div class="header-curve"></div>
        <div class="header-building"></div>
    </div>
</div>

И мой css таков (не беспокойтесь о конкретном синтаксисе LESS)

.header-menu {
    #gradient > .vertical(@baseColor, @baseColorDark);
    height: 82px;
    margin-top: 82px;

    .header-curve {
        background: @baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
        height: 82px;
        margin-top: -82px;
        width: 1020px;
    }

    .header-building {
        background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
        height: 214px;
        margin-top: -82px;
        width: 1000px;
    }
}

как решить проблему с IE? я уже пробовал position: относительный и zoom: 1 исправления.

Спасибо.


css internet-explorer margin
person cnkt    schedule 21.12.2011    source источник
comment
Можете ли вы объяснить, почему вы используете margin-top:-82px? Лично у меня почти никогда не было необходимости в отрицательной марже, я уверен, что есть гораздо лучшее решение.   -  person ptriek    schedule 22.12.2011
comment
82px — высота синей кривой. есть 2 изображения. кривая полностью белая, непрозрачная, за исключением половины эллипса, который получает синий цвет из класса меню заголовка. другое изображение — это здание со всеми белыми тенями и эффектами.   -  person cnkt    schedule 22.12.2011

Ответы (3)


arrow_upward
1
arrow_downward

Похоже, что стиль фильтра в вашем классе .header-menu заставляет его быть скрытым в IE, это необходимо?

person Shawn Steward    schedule 21.12.2011
comment
Когда я смотрю на вашу страницу с помощью инструментов разработчика IE, она показывает стиль фильтра, примененный к header-menu с помощью: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5085', endColorstr='#15315b', GradientType=0). Когда я отключаю этот стиль, он отображается нормально. - person Shawn Steward; 22.12.2011

arrow_upward
0
arrow_downward

Я думаю, что вы были на правильном пути с position: relative;, но также добавьте туда значение z-index (поиграйте со значением, пока оно не появится правильно).

person Nate B    schedule 21.12.2011

arrow_upward
0
arrow_downward

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

.header-menu {
    #gradient > .vertical(@baseColor, @baseColorDark);

    .header-curve {
        background: @baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
        height: 82px;
        width: 1020px;
    }

    .header-building {
        background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
        height: 214px;
        width: 1000px;
    }
}
person ptriek    schedule 21.12.2011
comment
вот. это упрощенная версия: websitem.gazi.edu.tr/test/index.html - person cnkt; 22.12.2011