Impostazione altezza div max non funziona

ho questo semplice HTMLImpostazione altezza div max non funziona

<html> 
<head> 
    <style> 
    </style> 
</head> 
<body> 
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"> 
    <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div> 
    <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div> 
</div> 
</body> 
</html>

Ci sono fondamentalmente due div s: uno "orizzontale" (altezza 2px) e uno (altezza 2px) "verticale".

Quando osservo la pagina su firefox:

enter image description here

mentre su IE (8) cosa succede weired:

enter image description here

il DIV superiore non è 2px alta.

Qualche idea, perché è così?

fonte

2012-11-11 Majid Laissi

ecco un breve [jsFiddle] (http://jsfiddle.net/pqps5/1 /). IE9 va bene. – kapa

@ bažmegakapa Ho provato a creare un jsfiddle me stesso e andava bene anche in IE 8, per questo motivo dovevo fare il printcreen. Puoi per favore provare a inserire il mio codice in un .html e vedere se hai questo comportamento imbarazzato anche nel tuo IE? (non usando jsfiddle). –

così fa IE7 ... forse hai solo bisogno di aggiungere 'display: block' – JFK

I suoi possibili soluzioni:

1). Aggiungi display: block al tuo stile

2). verificare di avere una corretta DOCTYPE altrimenti (IE) la modalità di quirks produrrà formato e risultati imprevisti. Check this article for reference

fonte

2012-11-12 00:04:07 JFK

Ho il sospetto che questo sarà IE aggiungendo alcune impostazioni "utili" in modalità quirks che spinge l'altezza di un contenitore all'altezza minima del testo. Prova a impostare line-height: 2px; per IE8 e inferiore (commenti condizionali, forse?) E questo dovrebbe essere ordinato.

fonte

2012-11-11 23:54:45

sì, ma non spiega perché sono riuscito a vedere che in jsfiddle ma non nel mio semplice HTML, la soluzione @Tyzoid vale per tutto il mio codice –

IE7, 8 e 9 funziona bene qui.

Non hai davvero bisogno del max-height, ma impostare un display: block e/o line-height: 2px invece potrebbe essere una soluzione.

fonte

2012-11-11 23:55:58 Behrens

sì ma non spiega perché sono riuscito a vederlo in jsfiddle ma non nel mio semplice HTML, la soluzione @Tyzoid vale per tutto il mio codice –

Il problema sembra derivare dalla modalità quirks mode.

Si verifica quando non è presente una dichiarazione doctype. L'altezza massima, tra le altre cose (incluso il modello di box), agisce come se fosse pari a 5. Una soluzione semplice è quella di aggiungere una dichiarazione doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

fonte

2012-11-11 23:58:37 Tyzoid

Grazie amico, l'ha fatto! –

@jidma: beh, te l'ho detto – JFK

Nel mio caso c'era un

min-height

impostazione che la priorità sulle altre impostazioni

fonte

2017-10-18 11:08:31

Impostazione altezza div max non funziona

risposta

Problemi correlati