IE7 y problema divs fijo
-
22-07-2019 - |
Pregunta
Fondo
Necesito hacer un diseño bastante complejo para un cliente, usando DIV fijo. Todo está bien en IE8, FF3 y Chrome, pero IE7 lo destruye todo
Editar: Los DIV fijos son obligatorios, solo el contenido DIV debe desplazarse (Esa es la especificación, lo siento)
Código HTML y CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="position: fixed; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 680px; float: left; background: white; margin-left: 185px; min-height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
Ancho IE8, FF3 y Chrome
IE8, FF3 y Chrome http://img39.imageshack.us/img39/ 406 / firefoxkpd.jpg
Ancho IE7
IE7 http://img23.imageshack.us/img23/1315/ie7l. jpg
Notas
No estoy tan preocupado por IE6 porque sé que no es compatible con Fixed
elementos, pero si sabes cómo solucionarlo, ¡genial!
Preguntas
- ¿Qué debo saber sobre los errores de IE7 para solucionar el problema?
- ¿Cómo puedo hacer referencia a la izquierda en las columnas del encabezado en relación con el contenedor?
- ¿Por qué la columna del encabezado va a la derecha y la columna derecha desaparece?
Solución
¡Encontró una solución! ¡Es bastante extraño flotar el contenido para right
solucionarlo!
¿Gano una cookie?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="position: fixed; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
Otros consejos
¿Qué pasa con esto?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="float: left; width: 185px; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 650px; float: left; background: white; left: 185px; min-height: 600px; height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="float: left; top: 10px; width: 90px; left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
Funciona en IE7, Firefox, Opera, Safari y Chrome. Supongo que también funcionará en IE6 e IE8. Tuve que reducir el ancho de & Quot; content & Quot; porque (columna derecha + contenido + encabezado) < envoltura
La posición fija no funciona en navegadores antiguos. Puede flotar los elementos uno al lado del otro.
Especifique también un relleno cero para el cuerpo, Opera utiliza un relleno predeterminado en lugar de margen (lo que en realidad tiene más sentido).
Puse los estilos en una hoja de estilo para que el código sea más limpio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="rightcolumn">
right
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
test
</title>
<!--[if lt IE 8]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</head>
<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative; border: 1px solid red; overflow: hidden;">
<div id="header" style="width: 185px; float: left; height: 600px; top: 10px; border: 1px solid blue;">
header
</div>
<div id="content" style="width: 680px; float: center; background: white; margin-left: 185px; min-height: 600px; border: 1px solid lime;">
content
</div>
<div id="rightcolumn" style="position: fixed; top: 10px; width: 95px; margin-left: 865px; height: 600px;border: 1px solid maroon;">
right
</div>
</div>
</body>
</html>
¡Eso debería hacerlo!
Si las soluciones basadas en scripts son aceptables, entonces he tenido cierto éxito con divs fijos (no necesariamente usando el diseño que tiene) usando Dean Edwards ' scripts de actualización que parchean los comportamientos de IE para que se parezcan más a los estándares indicados.