1
Mon objectif est de créer une mise en page de 200% de largeur et de hauteur, avec quatre conteneurs de hauteur et largeur égales (100% chacun), sans javascript comme ours minimal (ou de préférence sans hacks).Problème de mise en page basé sur Internet Explorer
En ce moment j'utilise HTML5, et l'affichage CSS: table. Cela fonctionne très bien dans Safari 4, Firefox 3.5 et Chrome 5. Je ne l'ai pas encore testé sur des versions plus anciennes.
Néanmoins, dans IE7 et IE8, cette disposition échoue complètement. (J'utiliser le script permettant HTML5 Javascript/cc .. /, donc il ne devrait pas être l'utilisation des nouvelles balises HTML5)
Voici ce que j'ai:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<title>IE issue with layout</title>
<style type="text/css" media="all">
/* styles */
@import url("reset.css");
/* Generall CSS */
.table
{
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
/* Specific CSS */
html, body
{
//overflow:hidden; I later intend to limit the viewport
}
section#body
{
position:absolute;
width:200%;
height:200%;
overflow:hidden;
}
section#body .row
{
width:200%;
height:50%;
overflow:hidden;
}
section#body .row .cell
{
width:50%;
overflow:hidden;
}
section#body .row .cell section
{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
section#body #stage0 section header
{
text-align:center;
height:20%;
display:block;
}
section#body #stage0 section footer
{
display:block;
height:80%;
}
</style>
</head>
<body>
<section id="body" class="table">
<section class="row">
<section id="stage0" class="cell">
<section>
<header>
<form>
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</header>
<footer>
<table id="scrollers">
</table>
</footer>
</section>
</section>
<section id="stage1" class="cell">
<section>
content
</section>
</section>
</section>
<section class="row">
<section id="stage2" class="cell">
<section>
content
</section>
</section>
<section id="stage3" class="cell">
<section>
content
</section>
</section>
</section>
</section>
</body>
</html>
Vous pouvez le voir vivre ici: http://www.tombarrasso.com/ie-issue/
juste une note, '//' n'est pas une syntaxe de commentaire valide en CSS - seulement '/ * ... * /' est valide en CSS. – scunliffe
En regardant dans les outils de développement IE8, il semble que IE ne parvienne pas à "imbriquer" vos balises HTML5. Je ne suis pas sûr que ce soit juste les outils de développement agissant, ou si cela reflète exactement ce que IE a "interprété" votre code. (Il fonctionne dans IE9 Dev Preview 1 au fait) – scunliffe
Il s'avère que si j'ai ajouté le /*@cc_on...*/ dans un tag de script dans la tête, et non un fichier externe, il fonctionne dans IE8 comme il se doit. Cependant, la disposition elle-même se comporte différemment dans IE7, une cellule occupe la totalité des 200% et aucun autre contenu n'est affiché. – Tom