IE7 Bug - overflow:hidden e position:relative

Scritto da davidonzo il 09/04/2008, in OpenSource, Web, Tutorial

IE7 at davidonzo.com Qualche tempo fa avevo elogiato IE7 per la buona compatibilità con gli standard ed eccoci oggi di fronte ad un bug veramente grave se pensiamo a come questo viene fuori.

La dichiarazione overflow:hidden di un elemento parent viene ignorata se in un elemento child (interno a quello parent) viene dichiarato il position:relative.

Ma la cosa davvero bella è che il bug si manifesta solo se nel documento è specificato un corretto DOCTYPE.

Vediamo il tutto tramite un esempio minimizzato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="IT-it">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>IE7 Bug - Overflow:hidden e position:relative</title>
<style type="text/css">
.parent{
width:300px;
height:60px;
border: 1px solid #ccc;
overflow:hidden;
}

.child{
position:relative;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Questo è un po' di testo.<br />
Questo è un po' di testo.<br />
Questo è un po' di testo.<br />
Questo è un po' di testo.<br />
Questo è un po' di testo.<br />
Questo è un po' di testo.<br />
</div>
</div>
</body>
</html>

Notate che dentro il div con classe parent è annidato il div con classe child. Nonostante il parent sia settato per nascondere tutto il contenuto che eccede i 60px di altezza ed i 300px di larghezza, Internet Explorer 7 ignorerà la direttiva a causa del position:relative; della classe .child.

Eliminando le prime due righe del documento a beneficio di un laconico e poco corretto <html> tutto funzionerà a dovere. Ma ci ritroveremo immediatamente con una pagina impossibile da validare ed il cui comportamento sarà poco chiaro da browser a browser. Questo perchè, nonostante qualcuno pensi che la dichiarazione di DOCTYPE sia una sfigataggine dei nerd, questa è realmente utilizzata dai browser per determinare l'output da visualizzare all'utente.

Soluzione

Per far si che overflow sia rispettato anche su Internet Explorer si abbia l'accortezza di definire nello stile dell'elemento parent lo stesso tipo di position dell'elemento child. Nel nostro caso:

.parent{
width:300px;
height:60px;
border: 1px solid #ccc;
overflow:hidden;
position:relative;
}

A voi un esempio con spiegazione estesa.