Lo sé. Internet Explorer, sobre todo el 7 para abajo, nos ha traido muchos problemas y hoy tuve uno en particular. Cuando quería centrar un menú que tenía “divs” flotantes (da igual si fuese “li”). Lo que hacía y funcionaba era poner un contenedor alineado al centro (con la propiedad display: inline-block;) y dentro los divs (los que muestran los items del menú) y todo perfecto, excepto en Internet Exploret 7.

Solución:

div.menu{
	width: 100%;
	text-align: center;
	height: 39px;
	margin-top: 3px;
}
div.menu div.items{
	text-align: center;
	display:inline-block;
	margin: 0 auto;
	height: 39px;
	zoom: 1;
	*display:inline;
}
div.items div.item{
	width: 150px;
	height: 39px;
	background-color: #333;
	float: left;
	margin: 0 5px;
}
<div class="menu">
	<div class="items">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

He usado el zoom, para poder hacer que el contenedor se muestre con las verdaderas dimensiones. El “*” es comentario en CSS para todos los navegadores, excepto internet explorer, así que con esto digo que utilice, en vez de display: inline-block, display: inline;

Con esto, solucionado.

Be Sociable, Share!