html - 在 IE6 中使用 html 和 css 水平(横向)扩展菜单

Question

我一直在尝试让水平扩展菜单的编码工作。菜单有一个图像背景，它应该随着内容的增加而横向扩展。

在代码中，我对一个 div 使用 background-position:left，对下一个内部 div 使用 background-position:right。

它在除 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>