Perché il layout cambia in IE quando UL è solo in un TD rispetto a un DIV extra vuoto?

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

Domanda

Sto aggiungendo la navigazione a schede basata su CSS a un sito che sta ancora utilizzando il layout basato su tabella. Quando inserisco il mio elenco di schede all'interno di un td, c'è un & Quot; gap & Quot; che puoi vedere. Se inserisco un div vuoto con larghezza: 100% nella td, il mio elenco di schede viene visualizzato correttamente. (Funziona bene anche fuori dal tavolo.)

Perché il div fa in modo che le schede siano disposte correttamente, e c'è un modo migliore per farlo farlo senza aggiungere un div privo di contenuti?

Ecco il mio caso di test: 

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

Ora lo ho inserito nel mio blog: Bacon Driven Coding: Perché il layout cambia in IE quando UL è solo in un TD vs con un DIV extra vuoto? , con uno screenshot così le persone possono vedere di cosa sto parlando.

Ecco lo screenshot:

Mind the Gap

È stato utile?

Soluzione

Il divario è causato dai modi divertenti di IE con le liste. Poiché ul i tag possono contenere solo <li> s, IE apparentemente ritiene che lo spazio tra gli elementi dell'elenco sia inappropriato e lo sposta all'interno dell'elemento dell'elenco precedente, nel tuo caso seguendo <a>.

Ciò causa quindi la sovrapposizione dello sfondo bianco della scheda selezionata sul bordo inferiore della <ul> (a causa del suo posizionamento).

Sembra che il modo più semplice per risolverlo in questo esempio sia semplicemente rimuovere il colore di sfondo su ul.tabnav li.current. In effetti, penso che tu possa rimuovere l'intero set di regole, dal momento che il confine non fa nulla.

Se nulla di tutto ciò ti aiuta a risolverlo sul sito reale, un'ultima risorsa potrebbe essere quella di sbarazzarti di tutti gli spazi bianchi al di fuori dei tag <=>. Per es. 

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

o qualcosa del genere se si desidera conservare una parvenza di formattazione: 

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

Ma quello spazio bianco è anche tutto ciò che è responsabile della spaziatura tra le schede, quindi dovresti aggiungere un margine giusto per riportarlo indietro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top