css - etiquetas - Salto de línea inesperado de Firefox usando flotadores y desbordamiento ocultos
propiedades hr (4)
De hecho, cuando busca una solución como http://jsfiddle.net/Volker_E/x5rPd/ , no necesita un segundo div para su comportamiento deseado.
Tengo un contenedor div que contiene dos elementos: un .button y una .box con texto dentro. .button es lo primero y está flotando a la derecha. .box no tiene float [esta es una restricción - no puedo dejarla flotar debido a estructuras similares que dependen de que no haya float]. .box tiene overflow: hidden; para establecer un nuevo contexto de formato de bloque. Esto permite que .box abarque "100% hasta" el elemento flotante anterior, .button .
.outer-container alberga a todos estos y está flotando a la derecha.
En Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac) e IE8-9, esto actuará de la forma deseada. El texto de .box permanece en una línea, y debido al flotador derecho del .outer-container , tendrá exactamente el tamaño que necesita ser. En Firefox, sin embargo, el texto se divide en otra línea.
También encuentro un problema similar cuando .button está flotado a la izquierda - obtengo el comportamiento deseado en todo, excepto en Firefox.
He visto este Firefox 16.0.1 y 19.0 para PC, y 18.0.1 y 19.0 para Mac. ¿Es esto un error?
Hoy me encontré con este problema en el que el nodo flotante dividiría la línea solo en Firefox, incluso después de configurar su display inline-block en inline-block y el motivo fue que el nodo del contenedor tenía una configuración de estilo de white-space configurada para nowrap . Así que restablecer el valor de white-space en white-space a la normal en el nodo del contenedor resolvió este problema para mí.
Agregar display: inline-block; a .box :
white-space: normal no funcionó el truco para mí. Lo que funcionó fue white-space: nowrap; en el contenedor de texto directo.