使用CSS的角圖像

我有一個相對簡單的設計令我感到困惑。它有4個大圖像需要粘貼到左上角，右下角和左下角，右角。圖像非常大，內容容器與它們重疊。有一點是這樣的：使用CSS的角圖像

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

來源

2009-06-18 Ross

可能是一個很好的問題爲http://quirksmode.org – Benjol 2009-06-18 08:41:01

你能概括什麼IE8確實錯了，對我們這些不想誰在未來發現這一個？ – ijw 2009-09-01 19:55:25

有許多方法來圓角（基本一致）。我覺得最舒服的一個，使每個其他四個的div：

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

另一個好處是，你不需要<img>標籤。

來源

2009-06-18 08:50:19 Kobi

這是我首先使用的方法，但我無法找到一種方法使底角在大分辨率顯示器上緊貼底部，但內容非常短。 – Ross 2009-06-18 09:10:28

你可以嘗試強制IE8進入IE7兼容模式。

棒

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

在

您<head>

來源

2009-06-18 08:59:28 Loofer

使用CSS的角圖像

回答

相關問題