UL이 TD에서 혼자있을 때 EL의 레이아웃이 추가로 비어있는 DIV를 갖는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1212860

문제

테이블 기반 레이아웃을 사용하는 사이트에 CSS 기반 탭 탐색을 추가하고 있습니다. 내 탭 목록을 TD 내에 배치하면 볼 수있는 시각적 "간격"이 있습니다. TD에서 너비가 100% 인 빈 DIV를 넣으면 내 탭 목록이 올바르게 표시됩니다. (테이블 밖에서도 잘 작동합니다.)

DIV가 왜 탭을 올바르게 배치하고, 콘텐츠가없는 div를 추가하지 않고 더 좋은 방법이 있습니까?

내 테스트 사례는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>
    Strange gap
</title>
   <style type ="text/css" >
/* stolen from http://unraveled.com/publications/css_tabs/, then hacked to death */

ul.tabnav { /* general settings */
border-bottom: 1px solid #cbcbcd; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
margin: 3px 0px 0px 0px; /* Right on top of the next row */
}

ul.tabnav li { /* do not change */
display: inline;
}

ul.tabnav li.current { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
/* border: solid 1px red; */
}

ul.tabnav li.current a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #cbcbcd; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cbcbcd; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

/* end css tabs */
    </style>         
    </head>
    <body>

            <table>
                <tr>
                    <td>
                    I'm making some tab navigation with css. I copied the code 
                    from <a href=" http://unraveled.com/publications/css_tabs/"> http://unraveled.com/publications/css_tabs/</a>,
                    and hacked it up. There's an odd behavior that I see on IE (v 7).
                    There's a gap below.

                    </td>
                </tr>
                <tr>
                <td>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    No gap below this

                    </td>
                </tr>
                <tr>
                <td  >
                <div style="width: 100%"><!-- This div forces the menu to render properly in IE7. I don't know why --></div>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a>Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    why? The difference is the presence of a div with style="width: 100%" on it in the second 
                    case. I don't know why this fixes the rendering; I'd like a better way to do it without adding an 
                    extra empty div. This page should be in standards mode (or at least non-quirks mode).

                    </td>
                </tr>
            </table>

            For comparison, it works fine outside of a table:

                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>

    </body>
</html>

이제 이것을 내 블로그에 크로스로 게시했습니다. 베이컨 구동 코딩 : UL이 TD에서 혼자있을 때 EL의 레이아웃이 왜 비어있는 이유는 무엇입니까?, 사람들이 내가 말하는 것을 볼 수 있도록 스크린 샷으로.

스크린 샷은 다음과 같습니다.

Mind the Gap

도움이 되었습니까?

해결책

그 차이는 목록이있는 IE의 재미있는 방법으로 인해 발생합니다. 부터 ul 태그 만 포함 할 수 있습니다 <li>S, 즉, 목록 항목 사이의 공백이 부적절하다고 생각하고 귀하의 경우 다음에 다음과 같은 경우에 이전 목록 항목 안에 움직입니다. <a>.

그런 다음 선택한 탭의 흰색 배경이 <ul>S 바닥 테두리 (포지셔닝으로 인해).

이 예에서 그것을 해결하는 가장 쉬운 방법은 단순히 배경색을 제거하는 것입니다. ul.tabnav li.current. 사실, 국경이 아무것도하지 않기 때문에 전체 규칙 세트를 제거 할 수 있다고 생각합니다.

그 중 어느 것도 실제 사이트에서 수정하는 데 도움이되지 않으면 최후의 수단은 <li> 태그. 예를 들어

<ul><li><a>Home</a></li><li>etc.</li></ul>

또는 형식의 유사성을 유지하려면 다음과 같은 것입니다.

   <ul><!--
   --><li><a>Home</a></li><!--
   --><li>etc.</li><!--
   --></ul>

그러나 그 공백은 또한 탭 사이의 간격을 담당하는 전부이므로 다시 가져 오기 위해 올바른 여백을 추가해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top