problema con el posicionamiento absoluto en Firefox y Chrome

No entiendo por qué FF y Chrome representan mi página de manera diferente. Aquí hay una pantalla de ella en

firefox: ejemplo de firefox http://grab.by/65Bn

y aquí hay uno en cromo

chrome: chrome ejemplo http://grab.by/65BB

fieldset tiene una posición relativa y la imagen tiene una posición absoluta.

aquí está la estructura básica:

Passenger 1

Básicamente, la imagen se declara justo después de la leyenda.

aquí está el CSS para fieldset:

 .passenger-info { background:none repeat scroll 0 0 #F2F2F2; border:1px solid #9D240F; display:inline; float:left; margin-bottom:10px; margin-right:10px; padding:3px 10px; position:relative; width:350px; } 

y para la imagen de eliminarme:

 .remove-me { border:1px solid red; position:absolute; right:0; top:0; } 

es totalmente extraño. Traté de poner el relleno del campo de juego, y la imagen se mueve un poco, pero aún no en la esquina.

Esta publicación muestra que FF sí tiene problemas con la representación de conjuntos de campos.

http://www.codingforums.com/showthread.php?t=132624

¿Hay alguna forma mejor de solucionarlo sin utilizar un hack específico para el navegador?

No puedo creer que esto tenga 4 años y aún no haya sido respondido. Busqué en todos lados esta respuesta. Esto es lo que hice para usar la posición absoluta en una imagen dentro de un fieldset. Desde aquí, cambie su posición correcta y superior para que funcione en Firefox. (deje su clase original en su lugar para IE, Chrome, Safari, Opera)

 @-moz-document url-prefix() { .remove-me { border:1px solid red; position:absolute; right:0; top:0; } } 

Este es un Hack de Firefox que me dicen que funciona para todas las versiones de Firefox. Estoy usando la versión 33.0.2 de Firefox, por lo que no puedo confirmar que esto funcione en versiones anteriores. Tuve el mismo problema en mi sitio. Se veía igual en IE, Opera, Safari y Chrome. Fue solo en Firefox cuando noté que el posicionamiento era diferente. ¡Esto funciona!

Parece que Firefox tiene un margen o relleno invisible que coloca el elemento en la parte superior derecha del espacio de texto. Chrome coloca el elemento en la parte superior derecha del elemento fieldset fuera del flujo de texto.

Una cosa que podrías hacer es agregar un envoltorio div y luego colocar el elemento en la esquina superior derecha del envoltorio para que quede sobre la esquina del fieldset.

Parece que el elemento .remove-me podría tener margen. Asegúrese de eliminar eso antes de agregar posición absoluta a los elementos.

Para obtener resultados precisos, siempre debe hacer un ‘reinicio’ en su CSS. Esto significa eliminar margen / relleno de cada elemento.

Un simple reinicio:

 * { margin: 0; padding: 0px; } 

Pon eso en la parte superior de tu CSS.

He usado la pantalla @media y (-webkit-min-device-pixel-ratio: 0) {} y arreglé mis absolutos de esa manera. No es muy seco, pero funciona.

En lugar de utilizar el margen, use izquierda, arriba, derecha, abajo. Ejemplo:

position: absolute; top: 10px; left: 20px;

Creo que es porque no indicó la altura del div (pasajero-info) que contiene el botón; Chrome comienza a actuar cuando no especificas esto.

La solución real es firefox, es decir, no establezca los valores predeterminados para arriba, izquierda, derecha e inferior.

Pude solucionar mi problema estableciendo estos correctamente.

Tuve un problema similar con un sitio web y las imágenes en Chrome estaban equivocadas. Tuve la posición en una imagen y un cuadro de entrada de la misma manera que su ejemplo al comienzo de esta publicación, y lo resolví colocando la posición absoluta en el cuadro de entrada y en la posición de la imagen en coordenadas relativas.

Cuando hago eso, cambia ambas posiciones pero pone márgenes en ambos. Lo tengo donde quiero, para resolver este problema con Firefox y Chrome tienes que seguir algunos de estos trucos para colocar las imágenes en el lugar correcto. Juega con la posición para que funcione.