使用圖像的CSS無邊框選項卡

在Stack Overflow的標籤所在的用戶頁面上（統計信息，最新消息，響應等），您會看到這些選項卡是它們所在行的擴展名。堆棧溢出通過定義純粹的CSS邊界來創建這種效果。我想要達到同樣的效果，但是我爲標籤和他們坐的線都有圖像。使用圖像的CSS無邊框選項卡

我有一個圓角（白色背景，灰色輪廓）框。標籤跨越頂部，相同的顏色。選項卡具有圓角頂部和無底部邊界。這些標籤在盒子的div前面是一個div。

爲了達到上述效果，我想這個標籤必須放下，並蓋住他們相遇處的邊框的那一部分。我在Firefox中完成了這一工作，但在IE中，您仍然可以看到框的邊框線。

如何調整此功能以在兩種瀏覽器中都能正常工作？

這裏是我的例子，在FF但不是在IE：http://www.mcrackan.com/recipes/csstest-loggedin.htm

[編輯：固定URL]

來源

2008-11-18 Dinah

我以前通過給「活動」選項卡類負的底部位置做了類似的事情，因此移動它以便它它在框架邊界之上。也許可能是解決方案？例如：

<style> 
ul.tabs { 
border-bottom: 1px solid blue; 
height: 20px; 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
    ul.tabs li { 
    float: left; 
    position: relative; 
    bottom: 5px; 
    margin: 0; 
    padding: 0; 
    } 
     ul.tabs li img { 
     float: left; 
     height: 20px; 
     width: 50px; 
     border: none; 
     } 
    ul.tabs li.selected { 
    bottom: -1px; 
    } 
</style> 

<ul class="tabs"> 
    <li><a href=""><img src="tab1.gif" /></a></li> 
    <li class="selected"><a href=""><img src="tab2.gif" /></a></li> 
    <li><a href=""><img src="tab3.gif" /></a></li> 
</ul>

來源

2008-11-19 00:06:34