Browser-Unterstützung für Anzeige erkennen: Inline-Block

Es gibt keine Möglichkeit, dies mit Javascript zu erkennen, da es sich um ein reines CSS-Attribut handelt, das sich nicht auf ein Objekt oder eine Funktion in Javascript bezieht. Das Beste, was ich Ihnen sagen kann, ist, hier nach einer ziemlich guten Kompatibilitätsliste zu sehen und CSS zum Erstellen zu verwenden ein Workaround.

Nun, hier ist, was Sie tun können, wenn Sie es tun wollen, indem Sie einfach den Browser des Browsers mit JavaScript anstelle von User Agent Sniffing untersuchen:

Richten Sie ein Testszenario und ein Kontrollszenario ein. Zum Beispiel mit folgender Struktur:

• div
  • div w / Inhalt "test"
  • div w / Inhalt "test2"

Fügen Sie eine Kopie in das Dokument ein, wobei die zwei internen divs auf inline-block gesetzt werden, und fügen Sie eine weitere Kopie in das Dokument ein, wobei die zwei internen divs auf block gesetzt sind. Wenn der Browser Inline-Block unterstützt, haben die enthaltenen Divs unterschiedliche Höhen.

Alternative Antwort:

Sie können getComputedStyle auch verwenden, um zu sehen, wie der Browser die CSS eines bestimmten Elements behandelt. In der Theorie könnten Sie also ein Element mit "display: inline-block" hinzufügen und dann den computedStyle prüfen, um zu sehen, ob er überlebt hat. Einziges Problem: IE unterstützt getComputedStyle nicht. Stattdessen hat es currentStyle. Ich weiß nicht, ob currentStyle identisch funktioniert (vermutlich funktioniert es ähnlich wie das Verhalten, das wir wollen: "ungültige" Werte außer Acht lassend).

Laut den QuirksMode-Diagrammen sind die einzigen Mainstream-Browser, die inline-block nicht unterstützen, IE6 und 7 (Nun, sie unterstützen es, aber nur für Elemente, die einen nativen display Typ von inline haben.) Ich würde einfach annehmen, dass es unterstützt wird und dann eine Problemumgehung für IE6 / 7 über bedingte Kommentare .

(Hinweis: Ich ignoriere die fehlende Unterstützung von Firefox 2 für inline-block und nehme an, dass die überwiegende Mehrheit der Benutzer auf FF3 aktualisiert hat, aber kurzes googeln hat keine Zahlen gefunden, um das zu unterstützen. YMMV.)

Wenn Sie jedoch nur die Unterstützung von JavaScript ermitteln möchten, müssen Sie auf das Sniffing von Benutzeragenten zurückgreifen. Die YAHOO.env.ua Klasse von YUI-Bibliothek ist ein handliches Stück Code, das du kopieren und verwenden kannst. (Es ist BSD lizenziert, hängt nicht von anderen Teilen der YUI-Bibliothek ab und ist nur etwa 25-30 Zeilen ohne Kommentare)

Übrigens: Es gibt einen ordentlichen Weg implementieren Sie browserübergreifende Inline-Blöcke in IE6 +, FF2 +, Opera und WebKit mit CSS allein. (Nicht gültiges CSS, aber immer noch nur CSS.)

Christopher Swasey ist ziemlich korrekt.

Ich habe eine jsFiddle-Demo seiner Technik im Ссылка eingerichtet.

Der Code ist im Wesentlichen:

Bitte beachten Sie, dass genau diese Technik auch für die Erkennung von display: run-in support funktioniert.