IE8의 CSS 메뉴 문제 - 디버깅

간단한 CSS 메뉴 (this page.) Chrome에서는 잘 작동합니다. 이것은 내가 사용하고있는 관련 CSS입니다.IE8의 CSS 메뉴 문제 - 디버깅

ul#list-nav { 
    clear:both; 
    list-style:none; 
    margin:0 0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav { 
    list-style:none; 
    margin:0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav li { 
    display:inline 
} 
ul#list-nav li a { 
    text-decoration:none; 
    padding:5px 0; 
    width:16.62%; 
    background:#754C78; 
    color:#eee; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; 
}

그것은 주로 a를 width에 문제뿐만 아니라, 뭔가 이상한 그들은 약간 찍기하고 있기 때문에 권리의 마지막 두 개의 세포로 일 이죠?

의견을 보내 주시면 감사하겠습니다.

는

타라

출처

2011-08-02 Tara

첫 번째 시도 더 일관성이 있기 때문에, 모든 것을 단순화를 제거에게 감사; Fx에서 떠 다니기에 충분한 너비가 아니라. 두 개의 마지막 버튼이 부딪히는 것도 Opera에 나타납니다. 예를 들어, 왜 앵커에 'float : left;'를 가지고 있고, 부모 'LI'는 이미'display : inline; '을 가지고 있는데, 비슷한 효과를냅니다. – feeela

웹 사이트는 저에게 잘 보입니다. 모든 브라우저, 코드를 보더라도 세미콜론으로'display : inline'을 닫지 않은 것을 볼 수 있습니다. – tw16

@Tara 모든 브라우저에서 괜찮은지 아닌지. 문제는 코드의 기본 사항에 있습니다. 각'menu li '의 너비를 상단의 이미지에서 흰 선과 일치하는 너비로 설정하면 메뉴의 전체 너비가 너무 커집니다. 별로는 아니지만 여전히. 아마도 800px 너비의 영역 만 채우고 사이드 바 및 상단 이미지 너비를 설정하여 메뉴와 일치하도록 높이를 설정했을 것입니다. 크롬을 사용하는 것을 회상합니다. 크롬에서 아무 곳이나 마우스 오른쪽 버튼을 클릭하면 목록에서'요소 검사 '를 볼 수 있습니다. 요소를 검사하기 위해 개발자 도구를 사용하십시오. 많은 도움이됩니다. – Joonas

폭과 추가 38px padding-left 및 padding-right

ul#list-nav li a { 
background:#754C78 none repeat scroll 0 0; 
border-left:1px solid #FFFFFF; 
color:#EEEEEE; 
float:left; 
padding:6px 38px; 
text-align:center; 
text-decoration:none; 
}

출처

2011-08-02 09:58:30

IE8의 CSS 메뉴 문제 - 디버깅

답변

관련 문제