2009-02-11 13 views
5

El siguiente código HTML se ve como obligatorio en Firefox 2 & 3 e IE7. El botón Left está a la izquierda, el botón Right está a la derecha y el texto en el medio está ... ¡en el medio!Problema de diseño de IE6: posicionamiento absoluto

Sin embargo, en IE6, el botón Left está desalineado: aparece centrado.

¿Alguien puede sugerir por qué?

<!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>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html> 

(He estado usando la herramienta de desarrollador de IE para tratar de analizar y solucionar este problema, en vano ...)

Respuesta

14

Debe desencadenar la propiedad hasLayout (algo IE ...) de #footer. El ancho y la altura lo activan, si no desea establecer un ancho o alto, puede usar la propiedad zoom solo en IE en CSS.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html> 

IIRC, en IE, los elementos tienen dos comportamientos diferentes de diseño, uno si es hasLayouttrue, y otro si es false. Asegurarse de que esté configurado en true puede solucionar muchos problemas de diseño extraños como este.

+0

¡Eso es bastante peverso! Gracias Jonas. Eso funciona casi a la perfección, ya que parece empujar el ancho de mi div que contiene en un par de píxeles en IE6. –

+0

Establecer el zoom cambiará el cursor. Puede que desee limitar esto a IE6 solo anteponiendo un _ a la regla. –

+0

No veo ningún problema de cambio de cursor Bjorn –

0

Sus elementos flotantes/posicionadas deben ser los primeros en orden antes de texto normalmente alineadas. No los coloque en el orden en que aparecen.

También es posible que desee agregar un! Importante para aumentar la precedencia y utilizar la barra de herramientas de IE Developer de Microsoft para ver qué reglas están surtiendo efecto. ¿Cuál es el ancho del elemento padre?

Parece que debería funcionar.

+0

Gracias, pero esto no parece cambiar las cosas. También esto ensuciaría las cosas para los usuarios que usan un lector de pantalla. –

2

probar este (valga el estilo en línea!)

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div> 
+0

Bastante excelente - ¡gracias AJM! Sin embargo, en IE6 ahora hay un espacio de 20 px entre la izquierda del botón izquierdo y el borde del pie de página ... –

0

voy a sugerir un poco de la oportunidad de su enfoque y ver si tiene suerte con esto:

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style> 

Luego, en el código HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div> 

A continuación, tendría para pasar y darles algunos márgenes para alinearlos cómo los quiere. Esto no funcionará para un diseño fluido, a menos que proporcione un pie de página fijo o un contenedor dentro del pie de página para estos artículos con un ancho fijo.

+0

Eso no parece funcionar del todo Temo que Matt ... –

2

Como dijo jonas.

En caso de duda, recomiendo especificar un ancho explícitamente, incluso si no es necesario, y prefiero usarlo sobre "zoom" ya que el zoom no fue diseñado para solucionar el problema de diseño. Sin embargo, establecer un ancho explícitamente no siempre es posible, por lo que "zoom" hace el truco.

0

Otra opción que encontré trabajó para mí para tratar con las etiquetas div posicionadas en ie6 es agregar los valores de izquierda y derecha en el CSS.

Es simple matemática si conoce el ancho de los divs con los que está trabajando.

Parece que "engrape" la caja div en su lugar.

He intentado con todas las otras sugerencias que he leído (incluido javascript para forzar que ie6 se comporte como si fuera ie7 o ie8) pero no funcionaron.

La solución de arriba lo hizo.

¡Buena suerte!

Cuestiones relacionadas