Firefox y Chrome dan valores diferentes para offsetTop

Estoy tratando de colocar un elemento span (llamémoslo "el intervalo de información sobre herramientas") relativo a un campo de entrada. Para hacer esto, estoy envolviendo el tramo de información sobre herramientas y el campo de entrada en otro elemento del tramo (llamémoslo "el tramo de la envoltura") que tiene position: relative. Luego establecí position: absolute en el intervalo de información sobre herramientas. Esto hace que la información de la barra espaciadora se ubique en relación con el tramo de la envoltura pero no forme parte del flujo de la página, sin ocupar ningún espacio. Esto es exactamente lo que quiero.Firefox y Chrome dan valores diferentes para offsetTop

Luego, usando javascript, establezco la posición de la información sobre herramientas relativa a la posición del elemento de entrada. Dado que el elemento de entrada se puede configurar de forma diferente en páginas diferentes (la secuencia de comandos debe ser aplicable globalmente), estoy usando sus propiedades offsetTop y offsetLeft para calcular su posición relativa al tramo de la envoltura.

Sin embargo, estoy notando inconsistencias entre los navegadores aquí. En Firefox, IE6, 7, 8, funciona como se esperaba. Pero en Chrome y Safari, el informe offsetTop parece, bueno, incorrecto.

Para probar esto, he creado la página de prueba a continuación:

<html> 
<head> 
<style type="text/css"> 
span { font-size: 8px; position: relative; top: 0; left: 0; border: 1px solid red } 
</style> 
</head> 
<body> 

<span id="wrapper"> 
<input id="foo" name="foo" type="text"> 
</span> 

<script type="text/javascript"> 
document.write("<br>Offset parent: " + document.getElementById("foo").offsetParent.id); 
document.write("<br>Offset top: " + document.getElementById("foo").offsetTop); 
</script> 

</body> 
</html>

y se carga en Firefox y Chrome. Ambos navegadores informan que el intervalo de envoltura es offsetParent, pero para Firefox el offsetTop es -8 y para Chrome es 2. Visualmente, la página presenta el mismo aspecto en ambos buscadores.

Esto me da un dolor de cabeza, porque no puedo modificar un desplazamiento diferente que siempre aplico cuando alguien usa Chrome, porque si cambio el tamaño de la fuente, el offsetTop no cambiará y mi script se romperá.

¿Esto es un error? ¿Puedo resolver esto de manera diferente?

Fuente

2009-09-24 waxwing

Intente esperar hasta que el documento esté listo – Greg

Lo hice en el código "real": no parece importar. He inspeccionado el offsetTop en Firebug y en la ventana del desarrollador de Chrome y los valores son los mismos. – waxwing

He movido etiquetas de etiquetas como esta (mensaje de error de validación: http://d.pr/i/yvGS) haciendo que sean en línea-bloque (junto con la posición: absoluta;) luego usando margen para ubicarlos en relación con su ubicación en HTML, en lugar de las propiedades top/right/bottom/left. Podría entrenar, si lo hace, podría evitar javascript extra. – KruegerDesigns

Use jQuery. Las diferencias DOM entre navegadores es una de las cosas en las que se destaca.

Fuente

2009-09-24 18:55:35

Santo metal oxidado! Iba a decir que este no es uno de esos problemas donde JQuery es la respuesta. Pero resulta que hay una función de posición() que no conocía, que realmente funciona.La pregunta sigue siendo por qué Chrome/Safari informa el desplazamiento de manera diferente. Pero obtienes el cheque. – waxwing

Ponga el código en una función window.onload. Recuerdo haber tenido problemas al intentar trabajar con dom directamente desde <script> durante la carga de la página en firefox, y webkit tiende a estar un poco más dispuesto a proporcionar un DOM cuerdo en dichos puntos.

Esto solo se basa en problemas anteriores que he encontrado, no estoy seguro de si es aplicable a su caso.

Fuente

2009-09-24 18:53:11 olliej

Me encontré con el mismo problema, y la función position() de jQuery informaba lo mismo que la función offset(). Finalmente resulta que incluso esperar que el documento esté listo no funcionó para mí. Tuve que verificar offset() más adelante en el flujo (en mi caso, en mi controlador que se dispara en un evento window.scroll).

Cuando pruebo este código de prueba a continuación, al cargar la página, obtengo diferentes figuras para Firefox + Chrome. Una vez que se carga, sin embargo, puedo presionar 'd' y obtengo la misma cifra para ambos navegadores.

// this produced different results on Chrome + Firefox (Chrome was wrong!) 
$(document).ready(function() { 
    var x = $('#some-div-on-your-page').position().top; 
    alert("On load, offset is "+x); // Chrome + Firefox report diff figures 

    $(window).keydown(function(e, r) { 
    k = e ? e.keyCode : event.keyCode; 
    if(k == 68) {  // press 'd' 
     var x = $('#some-div-on-your-page').position().top; 
     alert("Now the offset is "+x); // ...but this is consistent 
    } 
    }); 
}

Espero que esto ayude.

Fuente

2010-07-13 22:46:03 Eric

He estado teniendo el mismo problema que usted y me di cuenta de que (en mi caso) lo que estaba estropeando el offset(). Valor superior en cromo, era tener una o más imágenes sin la "altura" atributo por encima del elemento.

Antes

<img src="/images/foo.jpg" />

offset.top() fue de 100 en Chrome

offset.top() fue de 150 en Firefox e IE7 (Beleive o no, ha funcionado bien en IE!)

Después de

<img src="/images/foo.jpg" height="50" width="50" />

offset.top() es 150 en Firefox, IE7, Y CROMO.

Observe que la diferencia era 50px, que en realidad es la misma que la altura de la imagen.

Como estaba desarrollando un plugin de JQuery, intenté recopilar todas las imágenes que tenían sus atributos de ancho y alto indefinidos, y configurar manualmente su tamaño con .width() y .height(), pero no lo hice trabajo, porque Chrome devolvió 0 para ambas funciones. Entonces, supongo que el problema con offset.top() en realidad depende de eso. Si JQuery intenta obtener el valor de te offset.top() acumulando la altura del elemento "above", y uno de esos elementos es una imagen sin altura especificada, se agregará "0" a esa suma y, por lo tanto, el valor superior faltarán esas alturas "ignoradas".

PD: Lo siento por mi inglés, ha pasado mucho tiempo desde que escribí un largo texto en este idioma.

Fuente

2010-10-19 15:57:05 Nicolas

que estaba experimentando el mismo problema, y intentado añadir a mi función

$(document).ready(function(){});

y funcionó tanto en Chrome y Firefox

Fuente

2011-06-11 20:45:00 Carlos

Si aparece "0" en cromo, ver si se dirigen un elemento vacío como "a". Necesita envolver algo para devolver el desplazamiento correcto.

Fuente

2011-07-19 15:20:58 Radek

Podría estar relacionado con los diferentes valores de borde/margen para el HTML y los elementos del cuerpo que los navegadores configuran de forma predeterminada.

Fuente

2011-09-30 03:54:33 FSFatScooter

puede probar a usar

$(window).load

en lugar de

$(document).ready

porque Explorer y Chrome establece compensaciones adecuadas sólo después de que las imágenes han sido completamente cargado.

Fuente

2013-06-23 17:47:08 fabbricasiti

Firefox y Chrome dan valores diferentes para offsetTop

Respuesta

Cuestiones relacionadas