Voici le code pour illustrer mon problème:
Code :
- <!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="en" >
- <head>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
- <title>Test</title>
- <style type="text/css" media="all">
- div{
- overflow: auto;
- border: 1px solid black;
- }
- div#ex1{
- width: 200px;
- height: 60px;
- }
- div#ex2{
- width: 200px;
- height: 40px;
- }
- div#ex3{
- width: 200px;
- height: 20px;
- }
- </style>
- </head>
- <body>
- <div id="ex1">
- --------------------------------------------------<br/>
- width:200px et height:60px<br/>
- width:200px et height:60px<br/>
- width:200px et height:60px<br/>
- width:200px et height:60px<br/>
- width:200px et height:60px<br/>
- </div>
- <br/>
- <div id="ex2">
- --------------------------------------------------<br/>
- width:200px et height:40px<br/>
- width:200px et height:40px<br/>
- width:200px et height:40px<br/>
- width:200px et height:40px<br/>
- width:200px et height:40px<br/>
- </div>
- <br/>
- <div id="ex3">
- width:200px et height:20px<br/>
- width:200px et height:20px<br/>
- width:200px et height:20px<br/>
- width:200px et height:20px<br/>
- width:200px et height:20px<br/>
- </div>
- </body>
- </html>
|
Coté FF:
Sur ex1, tout va bien, l'overflow est conforme à ce que j'attendais.
Sur ex2, début des problèmes, le scroll vertical n'apparait plus.
Sur ex3, alors là il n'y a carrèment plus de scroll du tout.
Sous IE:
Sur les 3, pas de scroll horizontal mais toujours un scroll vertical.
Je me doute que les problèmes proviennent du fait que les navigateurs n'ont "pas la place" de construire les scrollbars, mais existe-t-il un moyen de contourner le problème (autre que refaire les scrolls en js)?
Et à la question, à quoi sert un div de 20px de haut avec un overflow, je répondrais ... pourquoi pas!!!
Message édité par anapajari le 19-01-2006 à 12:06:21
