IE7의 유동 너비

Question

클라이언트의 사이트를 개선하는 작업 중 하나는 크기가 다른 텍스트를 수용하도록 탐색을 변경하는 것입니다. 그 트릭은 다음과 같습니다 : 나는 CSS와 자바 스크립트을 html로 바꿀 수 없습니다. 아, 그리고 사이트의 jquery 버전은 1.4.4입니다. 이것은 변경할 수 없습니다.

나는 자바 스크립트 기반의 솔루션을 갖추고 있으며 모든 최신 브라우저에서 작동합니다. 그러나 IE7에서 제대로 작동하지 않는 것 같습니다. 이 솔루션은 필요한 너비 변경을 계산하기 위해 네이티브 너비로 렌더링되는 모든 nav 요소 (즉, 크기 조정 대신 랩핑)에 의존합니다. IE7에서는 탐색 항목이 명확하지 않습니다. 마지막 행은 첫 번째 행에 맞게 작은 크기로 줄어들므로 자바 스크립트는 크기를 계산해야한다고 말할 수 없습니다.

자바 스크립트가 정상적으로 작동해야합니다. 주요 문제는 내 CSS가 IE7에서 크기를 조정하는 대신 마지막 요소를 감쌀 것을 강요하지 않는지 알아야한다는 것입니다. 나는 display: inline-block;, white-space: nowrap; 및 float: left;의 조합을 철저히 시험해 보았습니다.

문제의 nav를 찾아서 right here에 넣습니다. 누구나 아이디어가 있거나 구현할 수있는 더 좋은 방법을 알고 있다면 알려주세요 - 모든 제안을 환영합니다!

Answer 1

비교할 jsFiddle 버전이 두 가지 있습니다.이 버전은 현재 진행중인 작업임을 확인합니다. 귀하의 CSS를 조금 정리했는데, 내가 한 주요한 일은 내비게이션의 li에 percentage width으로 설정되었습니다. 당신은 6 원소가 있으므로 100/6 = 16.6666 %입니다. 또한 아래 jsFiddles에서 jQuery를 제거하지 않아야합니다.

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; 
}