橫向擴展菜單在IE6中使用html和css

Question

我一直試圖讓水平擴展菜單的編碼工作..菜單有一個圖像背景，它應該隨着內容的增加而橫向擴展。

在代碼中，我使用background-position:left爲一個div，background-position:right爲下一個內部div。

它工作在IE6以外的所有瀏覽器的罰款......爲IE6犯規支持background-position:left

我需要相同的IE6工作以及..例如頂部菜單here。

我需要不同的代碼嗎？

Answer 1

這可能是矯枉過正...但根據netrenderer它工作到IE 5.5

http://photoshopmesta.net/1/test.html

CSS：

.left { 
    width: 25px; 
    height: 46px; 
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_left.png); 
    background-position: top left; 
    background-repeat: no-repeat; 
    float: left; 
} 

.middle { 
    height: 46px; 
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png); 
    background-position: top left; 
    background-repeat: repeat-x; 
    float: left; 
} 
.middle span { 
    font-family: Arial; 
    font-size: 12px; 
    color: #ffffff; 
    padding: 19px 20px 10px 20px; 
    float: left; 
} 

.right { 
    width: 40px; 
    height: 46px; 
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png); 
    background-position: top right; 
    background-repeat: no-repeat; 
    float: left; 
} 

HTML：

<span class="left"></span> 
<span class="middle"> 
    <span>Lorem ipsum</span> 
</span> 
<span class="right"></span> 

Answer 2

嘗試使用擴展形式：

#something{ 
    background-position: left center; 
} 

廣告@米

Answer 3

很多人有問題，試圖讓代碼在IE6正常工作。如果你真的不需要它，我會建議不要嘗試，因爲它非常困難。

如果您打算繼續使用它，我建議創建一個與IE6兼容的網站的不同版本，僅針對IE6使用不同的css文件。請參閱下面的鏈接。

http://www.quirksmode.org/css/condcom.html

而且這是處理IE6非常方便怪癖

http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs