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

【问题标题】：horizontally (sideways) expanding menus using html and css in IE6在 IE6 中使用 html 和 css 水平（横向）扩展菜单
【发布时间】：2011-06-17 18:25:31
【问题描述】：

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

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

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

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

我需要不同的编码吗？？

【问题讨论】：

能否在单独的 IE6_fix.css 样式表文件中使用非标准的 background-position-x 和 background-position-y？

标签： html css internet-explorer-6

【解决方案1】：

这可能有点过头了……但根据 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>

【讨论】：

没问题。我想指出，尽管它可以工作.. 就大半径而言，它确实是一种非常糟糕的方式，因为您无法在这些侧面区域中放置文本.. 很容易.... :D （意味着宽度半径的大小决定了侧面的最小填充...）
确实，即使在这种情况下你的半径相当大..如果你不使用我放在“.middle span”两侧的填充，它看起来会很好..

【解决方案2】：

尝试使用扩展形式：

#something{
    background-position: left center;
}

广告@m

【讨论】：

【解决方案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

【讨论】：

我想我已经看到了相同的代码，它适用于包括 ie6 在内的所有浏览器......但我发现 sn-p 令人困惑......
@Amen149 就需要 ie6 而言，您可以或多或少地检查一下：ie6countdown.com
@Lollero.. 我也同意你的观点.. 我讨厌 IE6.. 但我担心的人肯定喜欢这个，我的前辈也是如此......:(