Fluid-width nav in IE7

Question

Работа над обновлением сайта клиента и одним из их запросов заключается в изменении навигатора для размещения текста любого размера. Вот трюк: Я не могу изменить html, просто css и javascript. О, и версия jquery на сайте 1.4.4 - это тоже не может измениться.

У меня есть решение на основе javascript, и оно работает во всех современных браузерах, но я не могу заставить его работать в IE7. Решение основывается на рендеринге всех навигационных элементов в их собственной ширине (т. Е. На обертке вместо изменения размера), чтобы рассчитать необходимые изменения ширины. В IE7 элементы навигации не очищаются - последний сжимается до крошечного размера, чтобы вписаться в первую строку, и javascript, таким образом, не может сказать, что изменение размера должно быть рассчитано.

javascript должен работать нормально, основная проблема заключается в том, что мне нужно знать, что мой css не делает, чтобы заставить последний элемент обернуть вместо изменения размера в IE7. Я пробовал исчерпывающее количество комбинаций display: inline-block;, white-space: nowrap; и float: left; безрезультатно.

Я изолировал навигацию и поставил ее в скрипке right here. Если у кого-то есть какие-либо идеи или я знаю, что лучше, я могу реализовать, дайте мне знать - все предложения приветствуются!

Answer 1

У меня есть две версии вашего jsFiddle для сравнения и проверки того, что вы собираетесь делать. Я немного очистил ваш CSS, но главное, что я сделал, было установлено percentage width на li в вашей навигации. У вас есть 6 элементов, поэтому 100/6 = 16.6666%. Я также не должен удалять jQuery в jsFiddles ниже.

http://jsfiddle.net/D8etp/1/ и http://jsfiddle.net/D8etp/2/

CSS

body { 
    margin: 0; 
} 
#top-nav{ 
    padding-top: 30px; 
    width: 940px; 
} 
#nav { 
    color: #FFF; 
    font-size: 12px; 
    margin: 0; 
    padding: 0; 
    text-transform: uppercase; 
    min-height: 49px; 
    background-color: #007369; 
    overflow: hidden; 
} 

#nav > li { 
    display: block; 
    float: left; 
    list-style-type: none; 
    margin: 0; 
    padding: 9px 0 0 0; 
    width: 16.6666666666%; 
} 
#nav > li > a { 
    display: block; 
    box-sizing: border-box; 
    text-align: center; 
    padding: 7px 12px 17px 12px; 
    line-height: 16px; 
    margin: 0 4px; 
    color: #fff; 
    text-decoration: none; 
    -webkit-border-top-left-radius: 3px; 
    -webkit-border-top-right-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -moz-border-radius-topright: 3px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    overflow: hidden; 
} 
#nav > li > a:hover { 
    background: #b0a893; 
} 
#nav > li > a:hover { 
    text-decoration: none; 
}