Detect Browser Unterstützung für die Anzeige: inline-block

Question

Wie kann man erkennen, ob ein Browser, um die CSS-Attribut-Display unterstützt: inline-block

Answer 1

Es gibt keine Möglichkeit, dass mit Javascript zu erkennen, da es ein reines CSS-Attribut ist, das nicht auf ein beliebiges Objekt oder eine Funktion in Javascript bezieht. Das Beste, was ich Ihnen sagen kann ist hier für eine ziemlich gute Kompatibilität zu überprüfen Liste und Verwendung CSS eine Abhilfe zu schaffen.

Answer 2

Nun, hier ist, was Sie gehen kann, wenn man es rein tun wollen, indem Sie die bavhiour des Browsers Prüfung w / javascript anstelle von User-Agent-Sniffing:

Stellen Sie ein Testszenario auf, und ein Steuer Szenario. Mit, sagt die folgende Struktur:

• div
  • div w / content "test"
  • div w / content "test2"

Legen Sie eine Kopie in das Dokument mit den beiden internen divs Satz Inline-Block, und legen Sie eine weitere Kopie in das Dokument mit den beiden internen divs gesetzt zu blockieren. Wenn der Browser inline-block unterstützt, werden die enthaltenen Divs unterschiedliche Höhen aufweisen.

Alternative Antwort:

Sie können auch getComputedStyle verwenden, um zu sehen, wie der Browser eines bestimmten Elements CSS behandelt. „: Inline-block, Anzeige“ und dann die computedStyle überprüfen, um zu sehen, ob es überlebt, so in der Theorie, könnten Sie ein Element mit hinzufügen. Einziges Problem: IE nicht getComputedStyle unterstützen. Stattdessen hat es current. Ich weiß nicht, ob current Funktionen identisch (vermutlich es ähnlich wie das Verhalten funktioniert wir wollen: „ungültig“ Werte ohne Berücksichtigung).

Answer 3

Nach dem Quirksmode Charts , die nur Mainstream-Browser unterstützen inline-block nicht sind IE6 und 7 (. Nun, sie unterstützen, aber nur für Elemente, die eine native display Art von inline haben) würde ich nur annehmen, dass es unterstützt wird und dann eine Lösung für IE6 / 7 über bedingte Kommentare .

(Anmerkung:.. Ich ignoriere fehlende Unterstützung des Firefox 2 für inline-block und unter der Annahme, die überwiegende Mehrheit der Nutzer zu FF3 aktualisiert hat, aber kurze googeln ausgraben konnte keine Zahlen, die sichern YMMV)

Wenn die Unterstützung von JavaScript zu bestimmen Ihre einzige Option ist jedoch, werden Sie zurück zum User-Agent-Sniffing fallen müssen. Die YAHOO.env.ua -Klasse von der YUI-Bibliothek ist ein handliches Stück Code, die Sie kopieren und verwenden könnten. (Es ist BSD lizensiert, nicht auf andere Teile der YUI-Bibliothek ab und ist nur etwa 25-30 Zeilen ohne Kommentare)

Answer 4

übrigens: Es gibt eine ordentliches Art und Weise Cross-Browser-Inline-Blöcke in IE6 +, FF2 +, Opera und WebKit mit CSS allein zu implementieren. (Nicht gültig CSS, aber immer noch nur CSS).

Answer 5

Christopher Swasey ist ganz richtig.

Ich habe eine jsFiddle Demo seiner Technik unter http://ajh.us/test- einrichten inline-block .

Der Code ist im Wesentlichen:

var div = document.createElement('div');
div.style.cssText = 'display:inline-block';

// need to do this or else document.defaultView doesn't know about it
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally

var results = false;

if (div.currentStyle) {
    results = (div.currentStyle['display'] === 'inline-block');
} else if (window.getComputedStyle) {
  results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block';  
}

//clean up
$(div).remove();

alert('display: inline-block support: '+results);

Bitte beachten Sie, diese genau die gleiche Technik funktioniert auch display: run-in Unterstützung zu erfassen.