Error de posicionamiento < IE8 - ¿Por qué? La mejor solución?

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

Pregunta

Noté que un sitio que mantengo tenía un pequeño error de diseño en FF / IE8 / Chrome (en esta página por ejemplo) - la imagen en la parte superior izquierda estaba un poco alta, perdiéndose en el encabezado en la parte superior.

Me preguntaba por qué no lo había notado cuando me hice cargo del sitio, pero me doy cuenta de que solo desde que actualicé IE7 a IE8 se hizo evidente: obviamente, el problema existirá desde hace mucho tiempo en los navegadores 'adecuados'. .

Para estos navegadores 'correctos', esta imagen absolutamente posicionada necesita que el atributo superior se establezca en 59px, a diferencia de los 56px que requiere IE7 (y a continuación).

Una solución es fácil, pero a) primero quiero entender el problema, yb) me gustaría considerar una variedad de soluciones (sé que habrá más de una). Con eso en mente ...

  • ¿Cuál es la causa del problema?

Muchos problemas de posicionamiento se debieron al modelo de cuadro de IE erróneo, pero pensé que esto había sido solucionado por IE7. ¿Es un problema de modelo de caja que todavía afecta a IE7 o es algo diferente?

  • ¿Cuál es la mejor solución?

Varias fuentes sugieren que usar comentarios de condición para incluir un archivo CSS de parche IE7 es el camino a seguir: 

<!--[if lte IE 7]>
 <link href="IE7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->

Directo, pero preferiría no tener que insertar eso en el encabezado de cada página del sitio (pero, por supuesto, lo haré si es necesario).

Sé que hay numerosos hacks de CSS que probablemente podrían hacer el trabajo, pero hay una escuela que dice que se debe evitar CSS porque son más difíciles de mantener, especialmente a medida que surgen nuevos navegadores. Ciertamente puedo simpatizar con esta mentalidad; sin embargo, este sitio se está reconstruyendo por completo en 3 meses, así que estoy buscando una solución a corto plazo. Si tuviera que elegir emplear un hack CSS, ¿qué necesito hacer para cambiar el comportamiento de IE7 y versiones posteriores?

También he leído que las buenas hojas de estilo de reinicio pueden evitar muchos de estos problemas, así que, para reír, apliqué Restablecer recargado hoja de estilo - como era de esperar, esto perturbó significativamente el sitio.

Entonces, para recapitular, cuál es exactamente el problema; ¿Cuál es la mejor solución a largo plazo, y qué solución sería más fácil de implementar, dada la naturaleza a corto plazo del problema?

CSS ('Banner02'): http://new.eminox.com/ _lib.css / content.css

¿Fue útil?

Solución

En realidad, creo que su problema no es con el posicionamiento de 'banner02', sino con la altura de 'banner01' div en la parte superior. Abrí el sitio en FF e IE7 y alineé el borde superior de la página. La imagen 'banner02' está exactamente en la misma posición de altura, pero el encabezado div 'banner01' era más alto en un navegador que en el otro. También creo que IE7 se estaba ejecutando en 'modo peculiar' que estaba cambiando ligeramente el modelo de caja.

Para hacer que FF e IE7 se vean iguales (lo siento, no tengo instalado IE8, y esta es mi PC de trabajo, así que no puedo instalar mucho para verificarlos todos), hice 2 cambios:

1) cambie el DOCTYPE de: < - esto probablemente no sea necesario. mira mi comentario a continuación. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

a: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) define una altura para 'banner01', porque no se había establecido previamente (en Global.css): 

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

(el banner 02 está en 59px, por lo que elegimos una altura de 48 porque 48 + 10px borde superior + 1px borde inferior = 59px)

Eso me lo aclaró ... pero nuevamente, solo lo probé en 2 navegadores. ¡Espero que eso ayude!

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