A fully working example is availiable here on jsFiddle. I fuertemente lo invito a mirar aquí ya que el CSS es algo grande, y no quería pegarlo aquí (lo que hace que mi pregunta sea difícil de leer).CSS a la izquierda: -50% que causa que IE7 ignore el ancho
Tengo una tabstrip centrada horizontalmente en mi sitio, la idea es que los elementos UL/LI estén centrados en la página y tengo una solución que hasta hace muy poco parecía que funcionaba en todas las configuraciones del navegador.
el código HTML para esto es muy simple:
<div id="tabContainer">
<ul>
<li style="width: 190px;"><span><a href="#">Tab One with more text</a></span></li>
<li style="width: 190px;"><span><a href="#">Tab Two</a></span></li>
<li style="width: 190px;"><span><a href="#">Tab Three is wide</a></span></li>
</ul>
</div>
- Cada
<li>es una ficha, que tiene relleno a la izquierda de la izquierda redondeada cosas pestaña. - Cada
<span>tiene relleno derecho para las pestañas redondas derechas. - Finalmente, el
<a>generalmente llena el resto para un gran clic objetivo. - Cada artículo está decorado de forma manual con un
width: 190pxque mantiene emabrgo uniforme anchos (para un aspecto visual agradable, esto es personalizada por el código del sitio por lo que es en unstylevs unclass
El CSS:.
- el CSS funciona con un concepto simple, el
<ul>se desplaza 50% derecha, y el<li>se desplaza el 50% restante (left: -50%;) para ponerlos siempre en el centro del contenedor principal. - Las pestañas se solapan un poco negativo usando margen & z-índice para las piezas de esquina se entrecruzan (hecho la imagen de fondo que no es importante aquí en)
El problema
IE7 decide que no va a escuchar el style="width: 190px" explícito, incluso si se le agrega !important. Sin embargo, esto solo parece ocurrir cuando left: -50% está presente en el artículo <li>. Si se quita ese estilo, las pestañas se desplazan hacia la derecha (ubicación incorrecta, pero con el ancho fijo correcto).
Para mí, esto parece que está relacionado ya que no hay nada que el left: -50% haría que los elementos que chocan con los obliga a ir a emabrgo ancho mínimo.
Esta configuración funciona correctamente y se prueba en:
- IE8
- IE9
- FF3.6
- FF5
- Chrome estable (v13) *
- Chrome Beta (v14) *
- Safari 3
* Como del 18 de julio, 2011
Por lo tanto, ¿Qué podría estar causando esto? ¿Por qué está sucediendo? ¿Cómo puedo arreglarlo? He intentado todo tipo de ajustes, y no puedo conseguir que obedezca el ancho ...
imagen para que pueda ver el problema de lado a lado:
Problem http://img715.imageshack.us/img715/3686/ie7centertabsproblem.png
¿Está ejecutando un verdadero IE7 instalar? Al menos funciona bien para mí en IETester, incluso en IE6. Sin embargo, se ve un poco sobre-diseñado, y si estás dispuesto a dejar caer el código actual, estoy seguro de que thirtydot lo va a encajar :) –
¿Estás particularmente apegado a ese método de centrar los 'li's? Lo que estoy diciendo es, ¿puedo centrarlos con una técnica diferente? – thirtydot
@Wesley: ¿La pestaña central no es más estrecha que la izquierda/derecha? Estoy usando el modo Documento/Navegador IE7 en IE9 (Win7) y también tengo el isssue confirmado en IETester IE7 en WinXP. Déjame publicar fotos de los problemas. – Aren