sea - html5 internet explorer
Pseudoclase: el control deslizante no funciona en IE7 (3)
Descubrí que esta solución funcionaba mejor y era un poco más limpia:
<style type="text/css">
* {
color: #fff;
}
.wrapper {
}
.trigger {
background: #223;
}
.appear {
background: #334;
display: none;
}
.trigger:hover .appear {
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="trigger">
<p>This is the trigger for the hover element.</p>
<div class="appear">
<p>I''m <strong>alive!</strong></p>
</div>
</div>
</div>
</body>
Tengo un código tan simple:
<div class="div1">
<div class="div2">Foo</div>
<div class="div3">
<div class="div4">
<div class="div5">
Bar
</div>
</div>
</div>
</div>
y este CSS:
.div1{
position: relative;
}
.div1 .div3 {
position: absolute;
top: 30px;
left: 0px;
width: 250px;
display: none;
}
.div1:hover .div3 {
display: block;
}
.div2{
width: 200px;
height: 30px;
background: red;
}
.div4 {
background-color: green;
color: #000;
}
.div5 {}
El problema es: cuando muevo el cursor de .div2 a .div3 ( .div3 debe permanecer visible porque es el elemento secundario de .div1 ), el .div1 se desactiva. Lo estoy probando en IE7, en FF funciona bien. ¿Qué estoy haciendo mal? También me he dado cuenta de que cuando .div5 etiqueta .div5 de lo que está funcionando. ¿Algunas ideas?
IE7 no le permitirá aplicar :hover pseudoclases de desplazamiento a elementos que no son de anclaje a menos que especifique explícitamente un tipo de documento. Solo agrega una declaración de tipo de documento a tu página y debería funcionar perfectamente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Se puede encontrar más información sobre el modo IE7 / quirks en esta publicación de blog .
¿Podría ser el problema del doble margen? Hice una pantalla: bloque en línea cuando sucedió por un li http://www.positioniseverything.net/explorer/doubled-margin.html