J'ai une mise en page qui rend parfaitement bien dans les navigateurs basés sur Webkit mais dans Internet Explorer et Firefox l'alignement vertical est désactivé. L'exemple le plus simple du code est:dépassement de capacité: masqué; causant des problèmes d'alignement dans firefox
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>Vous verrez que le # content2 div est poussé vers le haut par rapport aux # content1 et # content3 divs. J'ai une raison relativement forte d'utiliser les blocs en ligne sur les flottants dans cette situation, mais si la seule "solution" est de passer aux flotteurs, je vais devoir continuer, mais je préfère éviter ce travail si possible car, actuellement, le lancement de notre test pilote est trop court, à long terme, la mise en page pourrait être déplacée vers des flotteurs. En outre, j'ai essayé de jouer avec les marges et les paddings sans succès. Dans ce bordel j'ai établi que c'est la présence de débordement: caché dans # content2 qui provoque cette distorsion line-break-esque.
Toute aide très appréciée.
Utilisez-vous un doctype? –
yup, mais pas dans cet exemple. Doc type os xhtml strict. – Mike