Warum funktioniert Layoutänderung in IE, wenn UL allein in einem TD ist ein zusätzliches leeres DIV vs hat?

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

Frage

Ich füge CSS-basierte Navigation-Tab auf einer Website, die nach wie vor tabellenbasierte verwendet, ist das Layout. Wenn ich meine Liste der Registerkarte in einem td platzieren, gibt es eine visuelle „Lücke“, die man sehen kann. Wenn ich eine leere div mit einer Breite setzen: 100% im td, dann zeigt meine Registerkarte Liste korrekt. (Es funktioniert auch außerhalb der Tabelle in Ordnung.)

Warum machen die div die Laschen richtig auslegen, und gibt es einen besseren Weg, um sie so zu machen, machen einen Inhalt frei div ohne Zusatz?

Hier ist mein Testfall: 

<!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>

Ich habe jetzt gecrosspostet dies in meinem Blog: Bacon Driven Codierung: Warum in IE funktioniert das Layout ändern, wenn UL einen zusätzlichen leeren DIV vs mit , mit einem Screenshot allein in einem TD ist? so können die Menschen sehen, was ich rede.

Hier ist der Screenshot:

War es hilfreich?

Lösung

Die Lücke wird durch IE lustige Weise mit Listen verursacht. Da ul Tags nur <li>s enthalten kann, IE offenbar auch die Leerzeichen zwischen den Listenelementen glaubt nicht geeignet ist und verschiebt sie in der vorhergehenden Liste Artikel, in Ihrem Fall nach dem <a>.

Das dann den weißen Hintergrund der ausgewählten Registerkarte bewirkt, dass der <ul>s unteren Rand (aufgrund seiner Positionierung).

zu überlappen

Es sieht aus wie der einfachste Weg, es in diesem Beispiel zu lösen, ist einfach die Hintergrundfarbe auf ul.tabnav li.current zu entfernen. In der Tat, ich glaube, Sie, dass die gesamten Regelsatz entfernen, da die Grenze nicht alles tun, auch nicht.

Wenn nichts davon helfen Sie, es auf dem tatsächlichen Ort zu beheben, könnte die letzte Mittel sein alle Leerzeichen außerhalb der <li> Tags loszuwerden. Z. 

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

oder so etwas, wenn Sie einen Anschein von Formatierung beibehalten mögen: 

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

Aber das Leerzeichen ist auch alles, was für den Abstand zwischen den Lappen verantwortlich ist, so würden Sie einen rechten Rand hinzufügen, um es zurück zu bringen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top