Modelo de caja de Internet Explorer: ¿qué es el desplazamiento?

estoy tratando de adaptar un sitio para apoyar IE 7. Tengo un par de elementos, sin embargo, que están siendo desplazadas hacia la derecha por 69px. Estoy probando en IE9, configurado para renderizar la página como si fuera IE7. Cuando enciendo el modo desarrollador e inspecciono el elemento, noto que alrededor del "margen" hay un parámetro llamado "desplazamiento".Modelo de caja de Internet Explorer: ¿qué es el desplazamiento?

Nunca escuché hablar de esto antes y Google no me ayudó mucho - solo logré encontrar algo sobre float-offset, que no era lo mismo, pero supongo que estaba allí para eliminar algunos de los problemas del modo peculiar? ¿Cómo puedo eliminar este parámetro de compensación?

Obviamente tengo una hoja de estilo específica IE-7 configurado y se puede probar el problema usted mismo, vaya a mi entorno de prueba en este enlace:

http://suitable.amok-adhoc.com/2012/

Resuelto:

encontrado una solución - fue bastante simple. Sólo tenía que declarar explícitamente la posición así (a pesar de que fue heredado del elemento padre en todos los demás navegadores IE añadió un margen y lo llamó "offset", que es anulado por hacer esto):

p { 
    left:0px; 
}

Fuente

2012-02-13 funkylaundry

Ver este SO responder: http://stackoverflow.com/questions/4817745/how-do-i-get-rid-of-an-elements-offset-using-css – Kibria

No se ha encontrado La URL solicitada/2012/no se encontró en este servidor. Además, se encontró un error 404 No encontrado al intentar usar un ErrorDocument para manejar la solicitud. –

Lo siento, ese era mi entorno de desarrollo, no lo mantengo funcionando un año después;) Pero el hilo Kibria lo vincula para proporcionar una explicación realmente buena, que está en consonancia con la solución que me encontré. – funkylaundry

El offset es la distancia a la que se movió el elemento desde su ubicación original. Esto se ve cuando posición un elemento relativo o absoluto con left, top, bottom y/o right valores. Tome el siguiente código de ejemplo:

#header { 
    top: 3em; 
    left: 3em; 
    position: relative; 
}

Si inspeccionamos este elemento en Internet Explorer 10, vemos que el desplazamiento que mencionabas. Los valores em se han convertido a píxeles, pero el efecto aún está visible. Tenga en cuenta que vemos algo similar en los desarrolladores de Chrome Herramientas (también en Opera), sólo se ha etiquetado como "posición" en su lugar:

enter image description here

Curiosamente, Firefox ni siquiera aparece para comunicar el desplazamiento/posición a través de su ilustración:

enter image description here

al final, esto es una cuestión de mera semántica. Ya sea que lo llamemos "desplazamiento" o "posición", sigue siendo lo mismo; es la distancia desde su ubicación original en la pantalla.

Espero que esto ayude.

Fuente

2013-04-12 15:13:14 Sampson

CSS2.1 informalmente los llama desplazamientos, por cierto: http://www.w3.org/TR/CSS21/visuren.html#position-props – BoltClock

Nice find, @BoltClock. No estoy sorprendido por el uso de * offset *; es un término bastante común incluso entre las propiedades DOM relacionadas con el diseño. Estoy sorprendido de que Firefox, por increíble que sea, no los mencione. – Sampson

no he establecido las posiciones de los elementos, tampoco márgenes en self y parent, también desconecté todos los estilos en la pestaña calculada, pero el offset se movió aquí, y el elemento se cambió a 10px (en cromo no se movió, y se ajustó la posición : -10px elemento de cambio también en cromo) – devi

Esto parece extraño, pero puede intentar configurar vertical-align: top en el CSS para las entradas. Eso lo arregla en IE8, al menos.

Fuente

2014-06-30 09:31:11 BrainCoder

Tuve un problema similar, el ancho del menú del encabezado no aparecía correctamente (aparecía en tamaño reducido), después de algunas depuraciones me di cuenta de que había agregado rem Poly-fill que me estaba creando un problema. Yo estaba usando meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1") también.

Después de retirar rem-polyfil archivo JS, que comenzó a trabajar correctamente para mí.

Fuente

2017-07-25 10:58:52

Puede intentar utilizar: position: -ms-device-fixed; este truco me ayuda.

Fuente

2017-11-16 14:16:52

Modelo de caja de Internet Explorer: ¿qué es el desplazamiento?

Respuesta

Cuestiones relacionadas