如何在 IE7 中将 <li> 的宽度拉伸到父 <ul> 中的可用空间？

Question

如何在 IE7 中将<li> 的宽度拉伸到父级<ul> 的可用空间？

在 IE 8 和 FF 中

这样下拉就可以了

alt text http://shup.com/Shup/376449/11064114012-My-Desktop.png

但在 IE 7 中是这样的

编辑：7 月 5 日

I added live example here 在 IE7 中看到这个

alt text http://shup.com/Shup/376450/11064114133-My-Desktop.png

如何在 IE 7 中获得与 IE8 和 FF 相同的结果。

我不想给<ul> 和<li> 提供固定宽度

这是 CSS

#topnavcontainer {
    float: left;
    overflow: visible;
    width: 80%;
    margin-left: 17px }

ul#nav {
    position: relative;
    z-index: 597;
    float: left;
    margin-top: 6px; }

    ul#nav li {
        float: left;
        line-height: 1.3em;
        vertical-align: middle;
        zoom: 1; }

        ul#nav li a:active { color: #fff }

        ul#nav li.hover,
ul#nav li:hover {
            position: relative;
            z-index: 599;
            cursor: default; }

    ul#nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        width: auto;
        margin-top: 0px;
        white-space: nowrap;
        background -moz-opacity: .80;
        filter: alpha(opacity=80);
        opacity: .80;
        background: #fff }

    ul#nav li.last ul { left: -47px }

    ul#nav li li {
        float: none;
        font-weight: normal;
        padding: 7px 10px;
        border: solid #99b2d8;
        border-width: 0 1px 0 1px;
        background-color: #f6f6f6;
        color: #1f5fa9;
        background: #fff;
        display: block;
        width: auto;
        padding-bottom: 0; }

    ul#nav ul ul {
        top: 1px;
        left: 99%; }

    ul#nav li:hover > ul { visibility: visible;background: transparent }

ul#nav { font-weight: bold; }

    ul#nav li {
        padding: 5px 10px;
        border-style: solid;
        border-width: 0px 1px 0px 0;
        border-color: #fff;
        background-color: #f6f6f6;
        color: #fff;
        background: transparent url(images/css-bg/navaigation-off-hover-bg.jpg) repeat-x left top }

    ul#nav > li.first { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left top }

    ul#nav li.first.current { background:url(images/css-bg/navaigation-hover-first-bg.jpg) left top;color: #ed8813 }

    ul#nav > li.first:hover { background: transparent url(images/css-bg/li-first-bg.jpg) no-repeat left -27px }

    ul#nav > li.last { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right top }

    ul#nav li li.last {
        border: 0 solid #99b2d8;
        border-width: 0 1px 1px 1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px; }

    ul#nav li.last.current { background:url(images/css-bg/navaigation-hover-last-bg.jpg) right top;color: #ed8813 }

    ul#nav > li.last:hover { background: transparent url(imagescss-bg/li-last-bg.jpg) no-repeat right -27px }

    ul#nav li a { color: #fff; }

    ul#nav ul li.last { padding-bottom: 6px; }

    ul#nav ul li a:hover { text-decoration: underline }

    ul#nav li.hover,
    ul#nav li:hover { color: #fff;background: url(imagescss-bg/navaigation-off-hover-bg.jpg) repeat-x left -27px }

    ul#nav ul li.hover,
    ul#nav ul li:hover { background: #fff }

    ul#nav li:hover a { color: #fff }

    ul#nav li:hover li a { color: #1f5fa9 }

    ul#nav ul li.hover a,
    ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav ul li.hover a, ul#nav ul li:hover a { color: #1f5fa9 }

    ul#nav > li.current { background:url(images/css-bg/navaigation-active-bg.jpg) repeat-x left top;color: #ed8813 }

    ul#nav li.current a { color: #ed8813 }

    ul#nav a:link,
    ul#nav a:visited {
        color: #fff;
        text-decoration: none; }

    ul#nav a:hover { color: #000; }

    ul#nav a:active { color: #ffa500; }

Answer 1

尝试将边框应用到 ul 而不是 li。这样，您将为整个列表创建一个边框，而不是为每个列表创建一个边框。如果这不起作用，请告诉我。

Answer 2

如果你想使用 Jquery，这里有一个解决方案

(function () {
    $("ul#nav > li").each(function () {
    var width = 0;
    $("ul > li", $(this)).each(function () {
      var w = $(this).width();
      if (width < w) {
        width = w;
      }
    });
    if (width != 0) {
      $("ul > li", $(this)).width(width);
    }
  });
})();