IE7 e divs fixos problema
-
22-07-2019 - |
Pergunta
Fundo
Eu preciso fazer um layout bastante complexo para um cliente, usando DIV fixo. Tudo está bem no IE8, FF3 e Chrome, mas IE7 mangles toda a coisa
Editar: Os DIVs fixos são uma obrigação, apenas o conteúdo de rolagem DIV must (Essa é a especificação, sorry)
código HTML e 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>
Largura IE8, FF3 e Chrome
IE8, FF3 e Chrome http://img39.imageshack.us/img39/ 406 / firefoxkpd.jpg
Largura IE7
IE7 http://img23.imageshack.us/img23/1315/ie7l. jpg
Notas
Eu não estou tão preocupado com o IE6, porque sei que não suporta elementos Fixed
, mas se você sabe como consertá-lo, ótimo!
Perguntas
- O que devo saber sobre bugs IE7 para corrigir o problema?
- Como posso referência à esquerda nas colunas de cabeçalho relativamente ao invólucro
- Por que a coluna de cabeçalho vai a às desaparece coluna da direita direita e?
Solução
Encontrada uma correção !! Estranho o suficiente flutuando o conteúdo para correções right
isso!
Eu ganho um biscoito?
<!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>
Outras dicas
O que sobre isso:
<!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>
Ele funciona no IE7, Firefox, Opera, Safari e Chrome. Eu acho que ele vai funcionar no IE6 e IE8 também.
Eu tive que reduzir a largura do "conteúdo", porque o (na coluna da direita + conteúdo + cabeçalho)
A posição fixa não funciona em navegadores mais antigos. Você pode flutuar os elementos ao lado do outro.
Especifique um estofamento zero para o corpo também, Opera utiliza um preenchimento padrão em vez de margem (que na verdade faz mais sentido).
Eu coloquei os estilos em uma folha de estilo para tornar o código mais limpo:
<!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>
Isso deve fazê-lo!
Se as soluções baseadas em script são aceitáveis, então, tenho tido algum sucesso com divs fixos (não necessariamente usando o layout que você tem) usando Dean Edwards' atualizar scripts de que patch de comportamentos do IE para ser mais parecido com os padrões indicam.