Internet Explorer обрезание отрицательного поля - PullRequest
Новая
       8

Internet Explorer обрезание отрицательного поля

1 голос
/ 22 декабря 2011

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

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

Chrome/Firefox in top. IE 7/8/9 below

Первый из Chrome. 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? я уже пробовал положение: относительное и масштабирование: 1 исправление.

Спасибо.

Ответы [ 3 ]

1 голос
/ 22 декабря 2011

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

0 голосов
/ 22 декабря 2011

Я мог бы что-то упустить, но я все еще не понимаю, почему вы беспокоитесь об отрицательном поле. Следующий 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;
    }
}
0 голосов
/ 22 декабря 2011

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

...