Html IE6中的css li菜单动态线宽

我有这样一个css菜单：

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

我想创建以下内容：

|-----------------------------------| | Item1 | |-----------------------------------| | Item Two | |-----------------------------------| | Item C | |-----------------------------------| | A Rather Long Menu Item Down Here | |-----------------------------------| 但我明白了：

-------- | Item1 | |----------- | Item Two | |----------- | Item C | |----------------------------------- | A Rather Long Menu Item Down Here | ----------------------------------- 如果我将[li]或[a]标记设置为display:block，则它们会拉伸以填充最大可能的宽度。我希望它们都具有相同的宽度，这是由最宽的项目动态确定的，而不是通过手动在[ul]标签上设置宽度

哦，目标是IE6

更新： 宽度：1px，溢出：可见无法工作。获得了与没有显示时相同的挤压效果：阻止锚

---

这是针对一个以IE6为目标的内部网，所以我被困在那里。在其他项目中，我已经不再担心它了。JS是一个需求，所以我可能会使用它。不过，我总是讨厌这样做。

你唯一的选择就是javascript

顺便说一句，我的一个网站被大量家庭用户访问。我们已经看到IE6的流量下降到12%。两个月前是20%。这是因为IE的总流量保持在76%

---

我的观点是，您可能不应该再太担心IE6的怪癖了。

您唯一的选择是javascript

顺便说一句，我的一个网站被大量家庭用户访问。我们已经看到IE6的流量下降到12%。两个月前是20%。这是因为IE的总流量保持在76%

---

我的观点是，你可能不应该再太担心IE6的怪癖了。

一定程度的黑客攻击使其在IE6中工作，因为width:auto从来没有真正正常工作过

我已经看到了一些使用宽度解决这个问题的方法：1px；溢出：可见；，这在这种情况下可能会起作用，但最好是在有条件的评论中这样做，以免在真正的浏览器中塞满东西，或者使用holly hack或类似的方法。请注意，IE6可能会在怪癖模式和标准模式下以不同的方式处理此问题，因此请了解您的doctype

---

顺便说一句，你会把你的定位标签放在块上，这样你就可以得到一致的鼠标目标宽度。

一定程度的黑客攻击使它在IE6中工作，因为width:auto从来没有真正正常工作过

我已经看到了一些使用宽度解决这个问题的方法：1px；溢出：可见；，这在这种情况下可能会起作用，但最好是在有条件的评论中这样做，以免在真正的浏览器中塞满东西，或者使用holly hack或类似的方法。请注意，IE6可能会在怪癖模式和标准模式下以不同的方式处理此问题，因此请了解您的doctype

顺便说一句，将锚定标记放置为块，以便获得一致的鼠标目标宽度。

要使用纯CSS但宽度不均匀的ul中的收缩包装li，请尝试：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

然后，可以使用固定的线条高度和重复的背景图像来调整li元素的样式

如果您确定它是IE only，则可以将JavaScript内置到CSS中，并设置子宽度以匹配父宽度，因此：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}

要在ul中使用纯CSS但宽度不均匀的收缩包装li，请尝试：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

然后，可以使用固定的线条高度和重复的背景图像来调整li元素的样式

如果您确定它是IE only，则可以将JavaScript内置到CSS中，并设置子宽度以匹配父宽度，因此：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}

---

这非常简单：

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

---

这里的技巧是将浮动和添加空白相结合：nowrap；到堵塞的锚。事实上，你甚至不需要nowrap，除非你正在争夺空间。至于忽略12%访客的建议。。嗯

这非常简单：

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

---

这里的技巧是将浮动和添加空白相结合：nowrap；到堵塞的锚。事实上，你甚至不需要nowrap，除非你正在争夺空间。至于忽略12%访客的建议。。嗯

我建议不要使用JS来解决这个问题，尽管这当然是一个选项。更简单的CSS解决方案已经存在。我担心现在还不是人们不再担心IE6怪癖的时候；12%的访客太高了，不容忽视@ola：目前，要想找出如何纠正一个真正微小的显示怪癖的方法，投资回报率只有12%，用户数量下降的几率非常低。把时间花在增加功能或解决更大的问题上要好得多。差不多两年过去了，IE6的使用率下降到了2.71%——当它下降到1%以下时，也许我们终于可以继续了……@Ola Tuvesson：对我们来说，它已经下降到了1.74%；总数为：IE 64%，其中大部分在8和9上，Firefox 13%，Safari 13%，Chrome 7.5%。覆盖了大约60000个家庭用户。我建议不要使用JS来解决这个问题，尽管这当然是一个选项。更简单的CSS解决方案已经存在。我担心现在还不是人们不再担心IE6怪癖的时候；12%的访客太高了，不容忽视@ola：目前，要想找出如何纠正一个真正微小的显示怪癖的方法，投资回报率只有12%，用户数量下降的几率非常低。最好把时间花在增加功能或解决更大的问题上

---

已经过去了，IE6的使用率下降到了2.71%——当它下降到1%以下时，也许我们终于可以继续前进了……@Ola Tuvesson：对我们来说，它已经下降到了1.74%；总数为：IE 64%，其中大部分在8和9上，Firefox 13%，Safari 13%，Chrome 7.5%。覆盖了大约60000个家庭用户。向上投票支持你的代码，向下投票支持你的傲慢声明这非常简单。在这个帖子中唯一的傲慢声明是建议12%的用户不知何故不算数。懒惰和傲慢。是的，解决方案非常简单。谢谢你不投票！先生，你真是个天才，想出了这么简单的解决办法。这解决了我遇到的一个问题，IE6报告了一个无序列表，因此它的所有父级在显示给用户之前都比显示给用户之后窄得多。[…简单并不一定意味着它很容易]向上投票支持你的代码，向下投票支持你的傲慢声明这非常简单。这条线索中唯一傲慢的声明是建议12%的用户不知何故不算数。懒惰和傲慢。是的，解决方案非常简单。谢谢你不投票！先生，你真是个天才，想出了这么简单的解决办法。这解决了我遇到的一个问题，IE6报告了一个无序列表，因此它的所有父级在显示给用户之前都比显示给用户之后窄得多。[…简单并不一定意味着简单]