Tengo un diseño que se ve perfectamente bien en los navegadores basados en Webkit, pero en internet explorer y firefox la alineación vertical está desactivada. El ejemplo más simple del código es:desbordamiento: oculto; causando problemas de alineación en 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>Vas a ver que el div # Content2 es empujado hacia arriba en relación con los divs # Content1 y # content3. Tengo una razón relativamente fuerte para usar los bloques en línea sobre flotadores en esta situación, sin embargo, si la única "solución" es pasar a carrozas, tendré que seguir adelante, pero prefiero evitar ese trabajo si posible ya que, actualmente, el tiempo es corto para el lanzamiento de nuestra prueba piloto, a largo plazo el diseño podría moverse a flotadores.
Además, he tratado de meterme con los márgenes y los rellenos sin éxito. En ese lío, establecí que es la presencia del desbordamiento: oculto en # content2 que causa esta distorsión line-break-esque.
Cualquier ayuda muy apreciada.
¿Estás usando un doctype? –
yup, simplemente no en este ejemplo. Doc tipo os xhtml strict. – Mike