Posición: Posición absoluta: relativa en Chrome

He cometido el error cardinal de no depurar en TODOS los navegadores mientras diseñaba mi sitio. En Firefox (3.6.10) e IE8 los elementos del formulario aparecen bien, pero en Chrome (10), solo aparece la posición: elementos absolutos.Posición: Posición absoluta: relativa en Chrome

Tengo un formulario hecho a partir de una lista desordenada. Los elementos de la lista están configurados con posición: relativa. contiene una etiqueta flotante izquierda, un campo flotante derecho y, potencialmente, una posición: widget absoluto.

HTML:

<form><ul> 
    <li> 
     <label>Name</label> 
     <input type="text" /> 
     <a id="nameGenerator" class="widget"></a> 
    </li> 
</ul></form>

CSS:

form ul li{ 
    margin: 5px; 
    clear: both; 
    position:relative; 
} 
form label{ 
    float:left; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form input{ 
    float:right; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 
form .widget{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 99; 
}

puedo "arreglar" mediante la eliminación de la posición: relativa, sino que es inaceptable. ¿Hay algo que pueda hacer para producir los resultados deseados?

Fuente

2011-03-17 Bob Roberts

¿Y cuáles son los resultados deseados? Tal vez configurar y ejemplo? – easwee

@Myles, es inaceptable porque hace que todos los elementos de posición absoluta se adhieran a la parte superior de la pantalla, no permanezcan en su elemento de lista correspondiente. –

@Myles Gris - posición: estático es el posicionamiento predeterminado - no relativo. Necesita que el li sea relativo, ya que cada uno tiene que ser su propio padre para el widget, de lo contrario se posiciona en relación con el cuerpo, no con li. – easwee

Agregar a su css:

form ul li{ 
    overflow:auto; 
}

http://jsfiddle.net/cTTVs/1/

Fuente

2011-03-17 12:18:19

¿Qué en nombre de .... Gracias pero cómo en el nombre del cielo funcionó esto? Se ve bien ahora, simplemente no puedo entender por qué. –

Porque los elementos flotantes y absolutamente posicionados hacen que el elemento circundante esté vacío de elementos que fluyen naturalmente. Solo los elementos regulares hacen que el tramo circundante se ajuste al contenido, este es un 'problema' conocido (o en realidad, un comportamiento normal) con flotación. Otra solución habría sido agregar un div dentro de cada elemento de la lista con un 'clear: both' en él –

Bueno, gracias, te mueves indescriptiblemente duro. Me preocupaba volver a hacer las 20 páginas de mi aplicación web ... que consisten completamente en formularios. –

Sólo añadir overflow:hidden a las reglas form ul li. Esto funciona better than overflow:auto when clearing floats en muchas situaciones donde las barras de desplazamiento pueden aparecer en el elemento (posiblemente como sus 'widgets').

Actualización:

tuve una idea de que si el widget tiene que mostrar una lista de cosas tales como un buzón de sugerencias o selector de fecha, que será mejor no usar overflow valores para borrar sus flotadores. Una alternativa es the old clearfix hack que puede ser más adecuada. Check out this demo que tiene un widget falso que muestra las diferentes soluciones y cómo un widget alto podría funcionar con ellas.

Demostración: jsfiddle.net/Marcel/ghaHz

Fuente

2011-03-17 12:21:56 Marcel

Con la actualización, esta respuesta es mucho mejor que la mía. +1 –

Añadir overflow:visible y se va a resolver su problema.

Fuente

2012-12-13 09:15:23 Shreyas

Posición: Posición absoluta: relativa en Chrome

Respuesta

Cuestiones relacionadas