css - for - mapa erogeno de la mujer

El margen superior negativo no funciona en IE 8 o 9

Question

Tengo un div con margin-top:-200px . Quiero que el div se mueva hacia arriba / detrás del div encima de él.

Funciona muy bien en todos los navegadores excepto en IE hasta el momento. margin-top:200px funciona, entonces sé que no es un problema de margen colapsando.

¿Hay algún error del que no tenga conocimiento aquí?

Answer 1

IE no le gusta los márgenes negativos y no los renderiza correctamente. Posiciona tus elementos de manera relativa o absoluta y utiliza la top: -200px en top: -200px lugar.

Nota: su ubicación puede cambiar significativamente el diseño y es posible que tenga que volver a trabajar sus estilos.

Answer 2

Margen negativo ocultar el div ... Aquí es truco usar el zoom: 1, posición: relativo

Problema:

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

en IE, el área roja de la barra de herramientas div se oculta. incluso estamos usando el zoom: 1. para deshacernos de este problema, necesitamos agregar posición: relativa también.

Solución:

entonces tu clase de CSS se convertirá

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

http://trickyclicks.com

Answer 3

Para soportar los márgenes negativos en IE, he solucionado problemas similares con display: table; . Otras correcciones como zoom: 1; y position: relative; no siempre funciona (al menos en mi experiencia). Si solo quieres agregar este estilo a IE, te sugiero usar https://modernizr.com/

// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; } 

Answer 4

Si lo anterior no ayuda: asegúrese de que haya un div alrededor de su div ofensivo. Ahora agregue un ancho del 100% al div ofensor y flótelo hacia la izquierda. Me gusta esto. Me deshice de todo mi margen negativo, es decir, penas ...

div.container {}
div.offender /*inside div.container*/ {
  width: 100%;
  float: left;
  margin-bottom: -20px;   /* ie fix */
  zoom: 1;                /* ie fix */
  position: relative;     /* ie fix */
  display: block;
}

Answer 5

dar posición como relativa. el estilo en línea es aconsejable. Puede dar algún problema si usa CSS externo.