Safari 5.1 rompe el espacio entre celdas de la tabla CSS

Mi sitio funcionaba bien en todos los navegadores principales hasta la actualización de Safari 5.1. Ahora, la navegación principal está reventada. Estaba usando display:table-cell en el elemento de anclaje dentro del elemento de la lista y también estaba usando el truco font-size:0 para eliminar el espacio entre los elementos del menú. ¿Alguien más ha encontrado este problema y tiene una solución que podrían ofrecer?Safari 5.1 rompe el espacio entre celdas de la tabla CSS

Antes:

Después:

CSS:

#navigation { 
    padding-top: 7px; 
} 

#navigation ul.links, /* Main menu and secondary menu links */ 
#navigation .content ul /* Menu block links */ { 
    margin: 0; 
    padding: 0; 
    display: block; 
    font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear 
        since they are inline-block elements, this should be unneccessary when 
        CSS3 is approved */ 
} 

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */ 
#navigation .content li { 
    display: inline-block; 
    padding-right: 0; 
    padding-left: 0; 
    margin: 0; 

    /* below is a fix for IE7 to get the main navigation items lined up correctly 
    * in one row 
    */ 
    zoom: 1; 
    *display: inline; 
} 
#main-menu ul { 
    width: 100%; 
} 
#main-menu li { 
    width: 108px; 
    text-align: center; 
    padding-bottom: 7px; 
    font-size: 11pt; 
} 
#main-menu a { 
    display: table-cell; 
    width: inherit; 
    text-decoration: none; 
    font-size: 0.9em; 
    color: #035B9A; 
    background-color: white; 
    height: 30px; 
    vertical-align: middle; 
}

HTML:

<div id="navigation"> 
    <div class="section"> 
     <h2 class="element-invisible">Main menu</h2> 
     <ul id="main-menu" class="links inline clearfix"> 
      <li class="menu-379 first"><a href="/about-scrubbed">About Us</a></li> 
      <li class="menu-401"><a href="/" title="">Research</a></li> 
      <li class="menu-385"><a href="/education">Education</a></li> 
      <li class="menu-402"><a href="/" title="">Outreach</a></li> 
      <li class="menu-403 active-trail active"><a href="/news" title="" class="active-trail active">News &amp; Events</a></li> 
      <li class="menu-439"><a href="/people">People</a></li> 
      <li class="menu-405"><a href="/" title="">Resources</a></li> 
      <li class="menu-406"><a href="/" title="">Publications</a></li> 
      <li class="menu-415 last"><a href="/partners">Partners</a></li> 
     </ul> 
    </div> 
</div>

Gracias.

Solo una nota, este es un sitio de Drupal 7.

También confieso abiertamente y humildemente que no soy el mejor en el marcado de CSS. Estoy aprendiendo mucho en este momento y estoy tratando de pasar.

Fuente

2011-08-05 Lester Peabody

¿Podría publicar un enlace al sitio en vivo? – tw16

No es un sitio en vivo, se desarrolló internamente en este momento con el lanzamiento programado para el 1 de octubre ... realmente lo siento. –

Sin embargo, resolví mi problema una vez más. Configuré el elemento list para 'display: block;' y 'float: left;' y comenzó a funcionar nuevamente. Lo publicaría como una respuesta, pero Stack no me lo permite :(¡Necesito obtener esa reputación! –

Se soluciona al hacer que los elementos de la lista se muestren como bloque y flotarlos hacia la izquierda.

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */ 
#navigation .content li { 
    display: block; 
    float: left; 
    padding-right: 0; 
    padding-left: 0; 
    margin: 0; 

    /* below is a fix for IE7 to get the main navigation items lined up correctly 
    * in one row 
    */ 
    zoom: 1; 
    *display: inline; 
}

Fuente

2011-08-08 00:47:42

Tomé el CSS y HTML, y se añade a la css

body { 
    background-color: gray; 
}

y me dieron el following, que parece ser correcta.

Este ensayo se realizó bajo el león, que tiene Safari 5.1

Fuente

2011-08-05 19:07:42

Bueno, ese cambio definitivamente no tendrá relación con el diseño. Tal vez sea un problema con Safari 5.1 en Windows. Gracias por verificarlo. –

¿Quieres border-collapse:collapse en el elemento display:table para eliminar el espacio entre celdas.

Fuente

2011-08-05 19:15:27 Phrogz

Esa fue mi idea original pero al revisar mi CSS nunca tuve un elemento principal con 'display: table;' así que no estaba seguro de dónde poner 'border-collapse: collapse;' Sin embargo, mi solución, como se indicó anteriormente, tiene todo funcionando nuevamente.Lo publicaría como respuesta, pero Stack me hará esperar 7 horas más. –

Para aquellos que tienen problemas con Safari y dimensiones para elementos configurados para mostrar: tabla; Pude solucionar mis problemas eliminando el relleno y agregando relleno a un conjunto de elementos secundarios para mostrar: tabla-celda;

Aparentemente a Safari no le gusta cuando intenta agregar relleno a un conjunto de elementos para mostrar: tabla; En retrospectiva, esto tiene sentido.

Fuente

2012-07-07 03:03:18

Gracias mil veces. Esto me estaba volviendo loco. – Hobo

Safari 5.1 rompe el espacio entre celdas de la tabla CSS

Respuesta

Cuestiones relacionadas