client / client Rückkehr unterschiedliche Werte auf verschiedenen Browsern

Question

Eigenschaften document.body.clientHeight und document.body.clientWidth unterschiedliche Werte auf IE7, IE8 und Firefox zurück:

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

Warum gibt es diese Diskrepanz?
Gibt es gleichwertige Eigenschaften, die in verschiedenen Browsern (IE8, IE7, Firefox) ohne Verwendung von jQuery konsistent sind?

Answer 1

Das hat mit der Browser-Box-Modell zu tun. Verwenden Sie so etwas wie jQuery oder eine andere JavaScript Abstraktions-Bibliothek, um das DOM-Modell zu normalisieren.

Answer 2

Paul A ist recht, warum die Diskrepanz existiert, aber die Lösung von Ngm angeboten falsch ist (im Sinne von JQuery).

Das Äquivalent von Clientheight und client jquery in (1.3) ist

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

Answer 3

Die Körper Element nimmt die verfügbare Breite, die in der Regel Ansichtsfenster Ihren Wünschen. Als solches wird es verschiedene Dimensionen seines Browser überqueren aufgrund Browser Chrom Grenzen, Bildlaufleisten, vertikalen Raumes durch Menüs nehmen und so weiter ...

Die Tatsache, dass die Höhen auch unterschiedlich sein, sagt mir auch, stellen Sie die body / html Höhe zu 100% durch CSS da die Höhe auf Elemente innerhalb der Körper in der Regel abhängig ist ..

Wenn Sie die Breite der Körper Element auf einen festen Wert durch CSS festlegen oder Stil-Eigenschaft ist, dann ist es Dimensionen werden in der Regel immer unterschiedlich sein Quer Browser / Versionen und vielleicht abhängig sogar auf Plugins für den Browser installiert ist. Konstante Werte in einem solchen Fall ist eine Ausnahme von der Regel ...

Wenn Sie .clientWidth auf andere Elemente aufrufen, die die automatische Breite des Browser-Ansichtsfenster nicht nehmen Sie, es wird immer die ‚width‘ + ‚padding‘ Elemente zurück. So ein div mit einer Breite 200 und eine Polsterung 20 werden client = 240 (20 Polsterung links und rechts).

Der Hauptgrund jedoch, warum ein client aufrufen würde, ist genau wegen möglicher erwarteten Abweichungen in den Ergebnissen. Wenn Sie wissen, dass Sie eine konstante Breite erhalten und der Wert bekannt ist, dann Aufruf client ist überflüssig ...

Answer 4

Das Äquivalent von offset und offset in jQuery ist $ (Fenster) .width (), $ (Fenster) .height () Es ist nicht das client und client

Answer 5

Element.clientWidth & Element.clientHeight Gibt die Höhe / Breite dieses Inhalts des Elements zusätzlich jede anwendbar Polsterung.

Die jQuery Implementierung davon sind: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight sind im CSSOM View Modul-Spezifikation enthält, die derzeit in dem Arbeitsentwurfsstadium ist. Während moderner Browser eine konsequente Umsetzung dieser Spezifikation, konsistente Leistung über Legacy-Plattformen zu gewährleisten, soll nach wie vor die jQuery-Implementierung verwendet werden.

Weitere Informationen:

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

Answer 6

Was ich tat mein Problem mit client zu beheben, ist die clientHight der Kontrollen first zu verwenden. Ich benutze 11 IE Etiketten aus einer Datenbank zu drucken und die client, die 8 in IE gearbeitet wurde, die Höhe von 0 in IE Rückkehr 11. ich eine Immobilie in dieser Kontrolle gefunden, die als first aufgeführt wurden und hatten eine Eigenschaft, wenn client und tatsächlich hatte die Höhe ich suchte. Also, wenn Ihr die Steuerung einen Blick auf das Eigentum seiner first eine Clientsize von 0 nehmen Rückkehr. Es half mir ...

Answer 7

Ich hatte ein ähnliches Problem - firefox den richtigen Wert von obj.clientHeight zurückgegeben, aber das heißt tat nicht- es 0. kehrte ich es obj.offsetHeight geändert und es funktionierte. Scheint es einige Zustand ist, die für die client also hat -, dass es fraglich macht ...

Answer 8

Es kann durch IE-Box-Modell Fehler verursacht werden. Um dies zu beheben, können Sie die Box Model Hack verwenden.

Answer 9

Einige weitere Informationen zum Browser-Fenster: http://www.w3schools.com/js/js_window.asp?output=print