Detectar suporte do navegador para display: inline-block

Question

Como você pode detectar se um navegador suporta a exibição atributo CSS: inline-block

Answer 1

Não há nenhuma maneira de detectar que com Javascript, pois é um atributo CSS puro que não se relacionam com qualquer objeto ou função em Javascript. A melhor coisa que posso dizer é verificar aqui para uma compatibilidade muito bom lista e use CSS para criar uma solução alternativa.

Answer 2

Bem, aqui está o que você pode ir se você quiser fazê-lo puramente por examinar a bavhiour do navegador w / javascript em vez de agente de usuário sniffing:

Configurar um cenário de teste, e um cenário de controle. Com, digamos, a seguinte estrutura:

• div
  • div w / o conteúdo "teste"
  • div w / conteúdo "test2"

Inserir uma cópia no documento com as duas divs internos definidos para inline-block, e inserir outra cópia no documento com as duas divs internos estabelecidos para o bloco. Se o navegador suporta inline-block, em seguida, os divs contendo terão diferentes alturas.

resposta alternativa:

Você também pode usar getComputedStyle para ver como o navegador está tratando css de um determinado elemento. Assim, em teoria, você pode adicionar um elemento com "display: inline-block", e depois verificar o computedStyle para ver se ele sobreviveu. Único problema: o IE não suportar getComputedStyle. Em vez disso, ele tem currentStyle. Eu não sei se currentStyle funções de forma idêntica (presumivelmente ele funciona de forma semelhante ao comportamento que queremos: desconsiderando valores "inválidos")

.

Answer 3

De acordo com o inline-block quirksmode gráficos , os únicos navegadores convencionais não apoiar são IE6 e 7. (. Bem, eles apoiá-lo, mas apenas por elementos que têm um tipo display nativo de inline) eu tinha acabado de assumir que é apoiado e, em seguida, aplicar uma solução alternativa para o IE6 / 7 via comentários condicionais .

(Nota:.. Eu estou ignorando do Firefox 2, a falta de suporte para inline-block e assumindo a grande maioria dos usuários não atualizado para FF3, mas breve googling não desenterrar quaisquer números para sustentar isso YMMV)

Se determinar o apoio do JavaScript é a sua única opção no entanto, você vai ter que cair de volta para user-agent sniffing. A classe YAHOO.env.ua do biblioteca YUI é um pedaço de código útil que você pode copiar e usar. (É BSD licenciado, não depende de outras partes da biblioteca YUI, e está a apenas cerca de 25-30 linhas sem comentários)

Answer 4

A propósito: Há um puro maneira para implementar cross-browser inline-blocos no IE6 +, FF2 +, Opera e WebKit com CSS sozinho. (Não é válido CSS, mas ainda só CSS).

Answer 5

Christopher Swasey é totalmente correcta.

Eu criaram uma demonstração jsFiddle de sua técnica em http://ajh.us/test- inline-block .

O código é essencialmente:

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

Por favor note que essa mesma técnica também funciona para detectar apoio display: run-in.