clientHeight / clientWidth che restituisce valori diversi su browser diversi

Question

Proprietà document.body.clientHeight e document.body.clientWidth restituiscono valori diversi su IE7, IE8 e Firefox:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Perché esiste questa discrepanza?
Ci sono proprietà equivalenti che sono coerenti tra i diversi browser (IE8, IE7, Firefox) senza usare jQuery?

Answer 1

Questo ha a che fare con il modello di scatola del browser. Usa qualcosa come jQuery o un'altra libreria di astrazione JavaScript per normalizzare il modello DOM.

Answer 2

Paolo A ha ragione sul perché esiste la discrepanza ma la soluzione offerta da Ngm è sbagliata (nel senso di JQuery).

L'equivalente di clientHeight e clientWidth in jquery (1.3) è

$(window).width(), $(window).height()

Answer 3

L'elemento body assume la larghezza disponibile, che di solito è la finestra del browser. In quanto tale, avrà dimensioni diverse nel browser a causa dei bordi cromati del browser, delle barre di scorrimento, dello spazio verticale occupato dai menu e quant'altro ...

Il fatto che anche le altezze varino, mi dice anche che hai impostato l'altezza body / html su 100% attraverso css poiché l'altezza di solito dipende dagli elementi all'interno del body ..

A meno che tu non imposti la larghezza dell'elemento body su un valore fisso tramite css o la sua proprietà di stile, le sue dimensioni di regola cambieranno sempre tra browser / versioni e forse anche a seconda dei plug-in installato per il browser. I valori costanti in questo caso sono più un'eccezione alla regola ...

Quando invochi .clientWidth su altri elementi che non assumono la larghezza automatica della finestra del browser, restituirà sempre gli elementi 'width' + 'padding'. Quindi un div con larghezza 200 e un'imbottitura di 20 avrà clientWidth = 240 (20 imbottitura sinistra e destra).

Il motivo principale, tuttavia, per cui si dovrebbe invocare clientWidth, è esattamente dovuto alle possibili discrepanze nei risultati. Se sai che otterrai una larghezza costante e il valore è noto, quindi invocare clientWidth è ridondante ...

Answer 4

L'equivalente di offsetHeight e offsetWidth in jQuery è $ (finestra) .width (), $ (finestra) .height () Non è clientHeight e clientWidth

Answer 5

Element.clientWidth & amp; Element.clientHeight restituisce l'altezza / larghezza del contenuto di quell'elemento oltre a qualsiasi imbottitura applicabile.

L'implementazione di jQuery di questi sono: $ (target) .outerWidth () & amp; $ (target) .outerHeight ()

.clientWidth & amp; .clientHeight sono inclusi nelle specifiche del modulo di visualizzazione CSSOM che è attualmente in fase di bozza di lavoro. Mentre i browser moderni hanno un'implementazione coerente di questa specifica, per assicurare prestazioni costanti su piattaforme legacy, l'implementazione jQuery dovrebbe comunque essere utilizzata.

Informazioni aggiuntive:

• https: //developer.mozilla [dot] org / it-IT / docs / Web / API / Element.clientWidth
• https: //developer.mozilla [dot] org / it-IT / docs / Web / API / Element.clientHeight

Answer 6

Quello che ho fatto per risolvere il mio problema con clientHeight è usare firstHild dei controlli clientHight dei controlli. Uso IE 11 per stampare etichette da un database e clientHeight che funzionava in IE 8 restituiva l'altezza 0 in IE 11. Ho trovato una proprietà in quel controllo che era elencata come firstChild e che aveva una proprietà se clientHeight e effettivamente aveva l'altezza che stavo cercando. Quindi, se il tuo controllo sta restituendo un clientSize di 0, dai un'occhiata alla proprietà di firstChild. Mi ha aiutato ...

Answer 7

Ho avuto un problema simile: firefox ha restituito il valore corretto di obj.clientHeight, ma cioè no, ha restituito 0. L'ho cambiato in obj.offsetHeight e ha funzionato. Sembra che ci sia uno stato che vale a dire per la clientheight - che lo rende iffy ...

Answer 8

Potrebbe essere causato da un bug del modello box di IE. Per risolvere questo problema, puoi utilizzare Box Model Hack .

Answer 9

Altre informazioni per la finestra del browser: http://www.w3schools.com/js/js_window.asp?output=print