Question

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

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

它在除IE6之外的所有浏览器中都能正常工作......因为IE6不支持background-position:left

我也需要在IE6中工作...例如顶级菜单here。

我需要以不同的方式编码吗？

Answer 1

尝试使用扩展表单：

#something{
    background-position: left center;
}

广告@米

Answer 2

许多人在尝试让代码在IE6中正常工作时遇到问题。如果你真的不需要它，我建议不要尝试，因为它很难。

如果您要继续使用它，我建议创建一个与IE6兼容的不同版本的网站，仅使用不同的IE6文件。请参阅以下链接。

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

Answer 3

这可能是过度的......但根据netrenderer，它可以工作到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>

在IE6中使用html和css水平（横向）扩展菜单

3 个答案: