Question

我有一个相对简单的设计令我感到困惑。它有4个大图像，需要粘贴在左上角，右上角和左下角，右角。图像非常大，内容容器与它们重叠。有点像这样：

Structure 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;
}

Answer 1

圆角有很多种方法（基本相同）。我觉得最舒服的就是彼此有四个div：

<div id="container" class="topleft"> 
  <div class="topright"> 
    <div class="bottomleft"> 
      <div class="bottomright"> 
         <!-- content -->
      </div>
    </div>
  </div>
</div>

另一个优点是您不需要<img>标签。

Answer 2

您可以尝试强制IE8进入IE7兼容模式。

坚持

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

在<head>

中

使用CSS的角落图像

2 个答案: