IE6에서이 탭 목록과 콘텐츠 창 사이에 간격이 생기는 이유는 무엇입니까?

정렬되지 않은 목록과 CSS를 사용하여 탭 목록을 설정하려고합니다. 이 IE7, 크롬, FF, 괜찮아 보이지만 IE6 않습니다. IE6에서는 탭과 내용 창 사이에 틈이 생겨서 그 이유를 찾는데 어려움을 겪고 있습니다.IE6에서이 탭 목록과 콘텐츠 창 사이에 간격이 생기는 이유는 무엇입니까?

HTML

<ul class="ptl_tablist"> 
    <li><a href="#">Tab One</a></li> 
    <li><a href="#">Tab Two</a></li> 
    <li class="selected"><a href="#">Tab Three</a></li> 
    <li><a href="#">Tab Four</a></li> 
</ul> 

<div class="ptl_tabcontent"> 
Content here: <input type="text" /> 
</div>

CSS

body { font-family: arial; font-size: 10pt; } 

/* Remove bullets */ 
.ptl_tablist { list-style: none; margin: 0; padding: 0; } 

/* Grey border around inactive tabs */ 
.ptl_tablist li { border: solid 1px #BBB; border-bottom-width: 0; float: left; margin: 0; } 

/* Block anchors, grey background, wide padding */ 
.ptl_tablist li a { 
    background: none repeat scroll 0 0 #EEE; 
    padding: 2px 15px; 
    display: block; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
} 

/* Black border around selected tab */ 
.ptl_tablist li.selected { border-color: #000; } 

/* Selected anchor */ 
.ptl_tablist li.selected a { 
    background: none repeat scroll 0 0 #FFF; 
    font-weight: 700; 
    position: relative; 
    top: 1px; 
} 

/* Yellow background for hovering over inactive tabs */ 
.ptl_tablist li a:hover { background: none repeat scroll 0 0 #FFFF70; } 

/* White background for hovering over active tab */ 
.ptl_tablist li.selected a:hover { background: none repeat scroll 0 0 #FFF; } 

/* Content under tabs. Clear floating tabs. Pad and border. */ 
.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; clear: both; }

jsFiddlehttp://jsfiddle.net/s7yZw/1/

출처

2011-04-05 Orange Kid

여전히 IE6을 지원한다면 누구나 인터넷을 망칠 수 있습니다! 또는 사람들의 적어도 98.5 %! – Rudie

IE6를 여전히 지원한다면, 당신은 모든 것을 얻을 자격이 있습니다! –

나는 그것을 무시할 수 있었으면 좋겠지 만 여전히 그것을 표준으로 사용하는 클라이언트를위한 것이다. 그들은 결국 위로 움직일거야 ... 나는 희망한다. 나는 현대적인 브라우저 용으로 개발하고 있지만 IE6에서는 전체 레이아웃 오류를 수정했다. –

줌 : 1.pt1_tabcontent에서 clear : 둘 다 교환하십시오.

.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; zoom:1; }

출처

2011-04-05 21:01:51 scrappedcola

IE를 지원하는 것과 같은 배에 있습니다. 우리 회사에는 IT 부서에서 IE 업그레이드를 아직 완료하지 않은 몇 가지 금융 기관이 아직 있으므로 IE6에 대한 몇 가지 기존 계약이 있습니다. 고맙게도 IE6에서 새로운 작업을 허용하지 않습니다. – scrappedcola

감사합니다. 그것은 트릭을했다. 콘텐츠 창을 확대하기 위해 확대/축소는 무엇을합니까? (이 클래스를 IE6 시트에 넣어야합니다.) –

요소의 hasLayout 속성이 true로 트리거됩니다. IE에서만 지원되므로 표준 CSS 파일에 넣을 수 있으며 아무런 영향을 미치지 않습니다. – scrappedcola

플로트 탭 (LI) 왼쪽, 그리고 A의도. 그런 다음 UL에서 clearfix를 사용하십시오.

출처

2011-04-05 20:40:23 Rudie

OMG 나는 IE6을 지원할 수 있다고 믿을 수 없다! 나는 그것을 위해 자신이 싫어! 이 답변에 투표하십시오! – Rudie

IE6에서이 탭 목록과 콘텐츠 창 사이에 간격이 생기는 이유는 무엇입니까?

답변

관련 문제