css - todos - Modelo de caja de Internet Explorer: ¿qué se compensa?

pagina web no se ve bien en internet explorer

Question

Estoy tratando de adaptar un sitio para que sea compatible con IE 7. Tengo algunos elementos, sin embargo, que están siendo compensados ​​a 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".

Nunca había oído 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 configurada una hoja de estilo específica de IE-7 y usted mismo puede probar el problema yendo a mi entorno de prueba en este enlace:

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

Resuelto

Encontré una solución, fue bastante simple. Simplemente tuve que declarar explícitamente la posición de esta manera (aunque se heredó del elemento padre en todos los otros navegadores IE agregó un margen y lo llamó "desplazamiento", que se reemplaza al hacer esto):

p {
left:0px;
}

Answer 1

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

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

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

Por extraño que parezca, Firefox ni siquiera parece comunicar el desplazamiento / posición a través de su ilustración:

Al final, este es un tema 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.

Answer 2

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

Answer 3

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

Answer 4

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

Después de eliminar el archivo rem-polyfil JS, comenzó a funcionar correctamente para mí.