¿Por qué cambia el diseño en IE cuando UL está solo en un TD frente a tener un DIV vacío adicional?

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

Pregunta

Estoy agregando navegación de pestañas basada en CSS a un sitio que todavía está usando un diseño basado en tablas. Cuando coloco mi lista de pestañas dentro de un td, aparece un & Quot; gap & Quot; que puedes ver Si pongo un div vacío con ancho: 100% en el td, entonces mi lista de pestañas se muestra correctamente. (También funciona bien fuera de la mesa).

¿Por qué el div hace que las pestañas se distribuyan correctamente y hay una mejor manera de hacerlo sin agregar un div sin contenido?

Aquí está mi caso de prueba: 

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

Ahora he cruzado esto a mi blog: Codificación controlada por tocino: ¿Por qué cambia el diseño en IE cuando UL está solo en un TD frente a un DIV vacío adicional? , con una captura de pantalla para que la gente pueda ver de lo que estoy hablando.

Aquí está la captura de pantalla:

Mind the Gap

¿Fue útil?

Solución

La brecha es causada por las formas divertidas de IE con las listas. Dado que las etiquetas ul solo pueden contener <li> s, IE aparentemente también cree que el espacio en blanco entre los elementos de la lista es inapropiado y lo mueve dentro del elemento de la lista anterior, en su caso siguiendo el <a>.

Eso hace que el fondo blanco de la pestaña seleccionada se superponga con el borde inferior de <ul> s (debido a su posición).

Parece que la forma más fácil de resolverlo en este ejemplo es simplemente eliminar el color de fondo en ul.tabnav li.current. De hecho, creo que puede eliminar todo ese conjunto de reglas, ya que el borde tampoco hace nada.

Si nada de eso lo ayuda a arreglarlo en el sitio real, un último recurso podría ser eliminar todo el espacio en blanco fuera de las etiquetas <=>. Por ejemplo, 

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

o algo como esto si desea conservar una apariencia de formato: 

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

Pero ese espacio en blanco también es todo lo que es responsable del espacio entre las pestañas, por lo que tendría que agregar un margen derecho para recuperarlo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top