CSS: Internet Explorer 7 e l'italic bug con la proprietà float e il posizionamento

CSS: Internet Explorer 7 e l'italic bug con la proprietà float e il posizionamento

Internet Explorer 7 ha un bug nella gestione dello stile italic relativo alla proprietà font-style che causa la comparsa di una barra di scorrimento orizzontale sullo schermo quando si utilizzano i float o il posizionamento assoluto. Vediamo i dettagli.

Float

Con il seguente codice:


div {
	background: lime;
	border: 1px solid green;
	height: 50px;
	width: 100%;
	font-style: italic;
}
span.left, span.right {
	background: green;
	color: white;
}
span.left {
	float: left;
}
span.right {
	float: right;
}

IE7 visualizzerà questa pagina:

Posizionamento assoluto

Con il seguente codice:


div {
	background: lime;
	border: 1px solid green;
	height: 50px;
	width: 100%;
	font-style: italic;
	position: relative;
}
span.left, span.right {
	background: green;
	color: white;
	position: absolute;
}
span.left {
	top: 0;
	left: 0;
}
span.right {
	top: 0;
	right: 0;
}

IE7 visualizzerà questa pagina:

La soluzione

Usiamo i commenti condizionali sia per IE7 che per IE6:


<!--[if lt IE 8]>
<style type="text/css" media="screen">
body > div[class] {overflow: hidden}
* html {overflow: visible}
</style>
<![endif]-->
Torna su