Wykryj obsługę przeglądarki dla wyświetlacza: blok inline

Question

Jak można wykryć, czy przeglądarka obsługuje wyświetlanie atrybutów CSS: blok inline?

Answer 1

Nie można tego wykryć za pomocą JavaScriptu, ponieważ jest to czysty atrybut CSS, który nie odnosi się do żadnego obiektu lub funkcji w JavaScript. Najlepsze, co mogę powiedzieć, to sprawdzenie, czy here jest całkiem niezłą listą kompatybilności i użycie CSS do utworzenia obejścia.

Answer 2

Według QuirksMode charts jedynymi przeglądarek głównego nurtu nie są nośne inline-block IE6 i 7 (Dobrze, że wspierają go, ale tylko dla elementów, które mają natywną display typ inline.) Ja po prostu założyć, że jest obsługiwany a następnie zastosować obejście dla IE6/7 przez conditional comments.

. (Uwaga: Ja ignorując brak Firefox 2 za wsparcie dla inline-block i zakładając, że większość użytkowników uaktualnieniu do FF3, ale krótki googling nie ujawniło żadnych numerów do siebie, że się YMMV.)

Jeśli jednak ustalenie wsparcia z JavaScript jest Twoją jedyną opcją, musisz powrócić do sniffingu przez użytkownika. Klasa YAHOO.env.ua z YUI library to poręczny fragment kodu, który można skopiować i wykorzystać. (Jest licencjonowany na BSD, nie zależy od innych części biblioteki YUI i ma tylko około 25-30 linii bez komentarzy)

Answer 3

Cóż, oto, co możesz zrobić, jeśli chcesz zrobić to wyłącznie poprzez zbadanie bavhiour przeglądarki w javascript zamiast snipowania agenta użytkownika:

Skonfiguruj scenariusz testowy i scenariusz kontrolny. Z, powiedzmy, o następującej strukturze:

• div
  • div w/treści "test"
  • div w/content "test2"

Włóż jedną kopię do dokument z dwoma wewnętrznymi elementami div ustawionymi na blok inline i wstaw inną kopię do dokumentu z dwoma wewnętrznymi blokami div ustawionymi na blok. Jeśli przeglądarka obsługuje blok wbudowany, to divy zawierające będą miały różne wysokości.

odpowiedź Alternatywny:

Można również użyć getComputedStyle zobaczyć jak przeglądarka traktuje css danego elementu. Tak więc teoretycznie można dodać element z "display: inline-block", a następnie sprawdzić computedStyle, aby zobaczyć, czy przetrwał. Jedyny problem: IE nie obsługuje getComputedStyle. Zamiast tego ma currentStyle. Nie wiem, czy currentStyle działa identycznie (prawdopodobnie działa podobnie do zachowania, które chcemy: pomijając "nieprawidłowe" wartości).

Answer 4

Przy okazji: Istnieje a neat way do implementacji bloków wbudowanych w przeglądarki w IE6 +, FF2 +, Opera i WebKit z samym CSS. (Niepoprawny CSS, ale wciąż tylko CSS.)

Answer 5

Christopher Swasey jest całkiem poprawny.

Utworzyłem demo jsFiddle jego techniki na http://ajh.us/test-inline-block.

Kod jest w istocie:

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); 

Należy pamiętać, to dokładnie ten sam technika działa również do wykrywania display: run-in wsparcie.