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]-->