Rileva supporto browser per la visualizzazione: blocco in linea

Question

Come si può rilevare se un browser supporta la visualizzazione degli attributi CSS: blocco inline?

Answer 1

Non c'è modo di rilevarlo con Javascript in quanto è un puro attributo CSS che non si riferisce a nessun oggetto o funzione in Javascript. La cosa migliore che posso dirti è controllare qui per una compatibilità abbastanza buona elencare e utilizzare i CSS per creare una soluzione alternativa.

Answer 2

Bene, ecco cosa puoi fare se vuoi farlo semplicemente esaminando il bavioco del browser con javascript anziché lo sniffing dell'agente utente:

Imposta uno scenario di prova e uno scenario di controllo. Con, diciamo, la seguente struttura:

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

Inserisci una copia nel documento con i due div interni impostati su blocco in linea e inserisci un'altra copia nel documento con i due div interni impostati su blocco. Se il browser supporta il blocco inline, i div contenenti avranno altezze diverse.

Risposta alternativa:

Puoi anche usare getComputedStyle per vedere come il browser sta trattando il css di un dato elemento. Quindi, in teoria, potresti aggiungere un elemento con " display: inline-block, " e quindi controlla lo stile calcolato per vedere se è sopravvissuto. Unico problema: IE non supporta getComputedStyle. Invece, ha currentStyle. Non so se currentStyle funzioni in modo identico (presumibilmente funziona in modo simile al comportamento che vogliamo: ignorare i valori "non validi").

Answer 3

Secondo i grafici QuirksMode , gli unici browser mainstream che non supportano inline-block sono IE6 e 7. (Beh, lo supportano, ma solo per elementi che hanno un tipo display nativo di inline .) I ' d supponiamo che sia supportato e quindi applicare una soluzione alternativa per IE6 / 7 tramite commenti condizionali .

(Nota: sto ignorando la mancanza di supporto di Firefox 2 per blocco in linea e supponendo che la stragrande maggioranza degli utenti abbia eseguito l'upgrade a FF3, ma una breve ricerca su Google non ha portato alla luce alcun numero a sostegno di ciò su. YMMV.)

Se la determinazione del supporto da JavaScript è la tua unica opzione, tuttavia, dovrai ricorrere allo sniffing user-agent. La classe YAHOO.env.ua dalla libreria YUI è un comodo pezzo di codice che puoi copiare e usare. (È concesso in licenza BSD, non dipende da altre parti della libreria YUI ed è solo circa 25-30 righe senza commenti)

Answer 4

A proposito: è perfetto modo di implementare blocchi in-line tra browser in IE6 +, FF2 +, Opera e WebKit solo con CSS. (CSS non valido, ma comunque solo CSS.)

Answer 5

Christopher Swasey è abbastanza corretto.

Ho creato una demo jsFiddle della sua tecnica su http://ajh.us/test- inline-block .

Il codice è essenzialmente:

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

Nota che questa stessa identica tecnica funziona anche per rilevare display: run-in support.