У меня относительно простой дизайн, который меня озадачивает. Он имеет 4 больших изображения, которые нужно прикрепить к верхнему левому, правому и нижнему левому, правым углам. Изображения довольно велики, и контейнер содержимого перекрывает их. Немного примерно так:
Структура http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png
Моя проблема в том, что моя реализация прекрасно работает во всех основных браузерах, кроме IE8 (которую я только начал уважать). Есть ли лучший способ сделать это?
Я сейчас использую следующую разметку:
<div class="corner-top">
<div><img src="./images/top-left-corner.png" /></div>
</div>
<div class="corner-bottom">
<img src="./images/bottom-left-corner.png" />
</div>
<div id="container">
....
</div>
#container {
margin: 60px auto;
width: 488px;
}
.corner-top {
background: url('./images/top-right-corner.png') top right no-repeat;
height: 356px;
min-width: 868px;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -20;
}
.corner-top div {
min-width: 868px;
}
.corner-bottom {
background: url('./images/bottom-right-corner.png') bottom right no-repeat;
bottom: 0;
height: 325px;
min-width: 868px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -20;
}
.corner-bottom div {
min-width: 868px;
}