html - script - IE6+IE7 Problema de CSS con desbordamiento: oculto;-posición: relativa; combo
script compatibilidad internet explorer (2)
Es un error bien conocido en IE6 e IE7. Para resolverlo, debe agregar posición: relativa al contenedor. Como en su caso el cuerpo es el contenedor, le sugiero que agregue un div directamente debajo del cuerpo y le dé la posición: relativo. debería resolver tu problema.
Así que he creado un control deslizante para una página de inicio, que desliza algunas imágenes con un título y texto de presentación mediante jQuery. Todo funciona bien, y fui a comprobar IE y encontré que IE 6 y 7 mata completamente mi slider css. No puedo entender por qué, pero por alguna razón no puedo ocultar las diapositivas no activas con desbordamiento: oculto; Intenté modificar el CSS de un lado a otro, pero no he podido descifrar qué causa el problema.
Recreé el problema en una página html más aislada.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr">
<head>
<style>
body {
width: 900px;
}
.column-1 {
width: 500px;
float: left;
}
.column-2 {
width: 200px;
float: left;
}
.column-3 {
width: 200px;
float: left;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
list-style: none;
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="column-1">
<div class="item-list clearfix">
<ul>
<li class="first">
<div class="node-slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 1</h4>
<p>Teaser 1</p>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 2</h4>
<p>Teaser 2</p>
</div>
</div>
</li>
<li class="last">
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 3</h4>
<p>Teaser 3</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="column-2">
...
</div>
<div class="column-3">
...
</div>
</body>
</html>
He rastreado que es el
ul {
position: relative;
}
en el elemento ul que está causando el desbordamiento: oculto para no funcionar, pero por qué es así, no sé. También esto es necesario para que el deslizador javascript funcione usando el atributo left en el ul para deslizarlo. Cualquier idea sobre cómo puede solucionar esto es muy bienvenida.
Este problema aparentemente es un error conocido para IE 6 + 7, que se corrigió en IE8.
Para evitar esto, en este caso puede reemplazar:
ul {
left: -499px;
position: relative;
}
con:
ul {
margin-left: -499px;
}
Sin embargo, esto dio algunos problemas con el fondo que utilicé en el div de infobox, pero nada que no pudiera resolver con algunos hacks de estilo.