横向扩展菜单在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