div block

[agenti]

mi sono sempre chiesto perchè con IE uan div segue e si adatta al suo contenuto mentre con FF la div rispecchia i suoi dato di altezza e larghezza.

ad esempio:


<div style="position: absolute; width: 100px;display:block;visibility:hidden; height: 100px; z-index: 1; left: 108px; top: 22px; background-color: #FFFF00" id="livello2">
onclick<form method="POST" action="">


<input type="text" name="T1" size="20"><input type="submit" value="Invia" name="B1"><input type="reset" value="Reimposta" name="B2"></p>
</div>

questa div con IE segue la grandezza del campo input al contrario con FF il campo input viene visualizzato esterno alla div.

questo nonostante che abbia usato l'attributo display:block;
come posso ovviare all'inconveniente ?

[seed_squall_it]

Usare display: block su un elemento <div> non serve a nulla, perché esso è già un elemento a livello di blocco per sua natura. Poi non ho capito perché c'è quel visibility: hidden...nasconde completamente il <div> e quindi qualsiasi impostazione gli si dia, non può essere visualizzata (tranne il fatto che la sua presenza continua ad influire sul layout degli altri box).

Detto questo, IE ha per natura un'errata implementazione del box model (e anche del float model, senza contare tutti i bug "esclusivi" che si porta appresso). IE interpreta width e height come se fossero le proprietà min-width e min-height. Quindi, se i contenuti del box sono eccessivi, IE ridimensiona il box in modo che possa contenere il tutto. Firefox invece segue gli standard e non ridimensiona un box a cui si sono impostate width e height.
Il W3C ha stabilito che, se i contenuti di un box con dimensioni dei contenuti assegnate (width e height) eccedono tali dimensioni, essi vengano visualizzati con la loro "parte eccedente" esterna al box, come se fossero posti su un "livello superiore" rispetto al box (è un po' in concetto su cui si basa lo z-index).

Non c'è modo per risolvere questo errato comportamento di IE purtroppo. Forse con IE7 è possibile (intendo la patch basata su JavaScript che corregge molti problemi al box model di IE, non il browser Internet Explorer 7), ma non saprei dirtelo.