Detectar el soporte del navegador para la pantalla: bloque en línea

Question

¿Cómo puede detectar si un navegador admite la visualización de atributos de CSS: bloque en línea?

Answer 1

No hay forma de detectar eso con Javascript, ya que es un atributo CSS puro que no se relaciona con ningún objeto o función en Javascript. Lo mejor que puedo decirte es que compruebes aquí para una compatibilidad bastante buena listar y usar CSS para crear una solución.

Answer 2

Bueno, esto es lo que puede hacer si desea hacerlo puramente examinando el bavhiour del navegador con javascript en lugar del agente de usuario sniffing:

Configure un escenario de prueba y un escenario de control. Con, digamos, la siguiente estructura:

• div
  • div w / content " prueba "
  • div w / content " test2 "

Inserte una copia en el documento con los dos divs internos configurados en bloque en línea, e inserte otra copia en el documento con los dos divs internos configurados para bloquear. Si el navegador soporta bloque en línea, entonces los divs que contienen tendrán diferentes alturas.

Respuesta alternativa:

También puede usar getComputedStyle para ver cómo el navegador está tratando el css de un elemento dado. Entonces, en teoría, podría agregar un elemento con " pantalla: bloque en línea, " y luego verifique el estilo computado para ver si sobrevivió. El único problema: IE no soporta getComputedStyle. En su lugar, tiene currentStyle. No sé si currentStyle funciona de manera idéntica (es de suponer que funciona de manera similar al comportamiento que queremos: ignorar los valores de " inválidos ").

Answer 3

De acuerdo con las QuirksMode charts , los únicos navegadores convencionales no admiten inline-block son IE6 y 7. (Bueno, lo admiten, pero solo para los elementos que tienen un tipo de display nativo inline ). I ' Simplemente asumo que es compatible y luego aplique una solución alternativa para IE6 / 7 a través de comentarios condicionales .

(Nota: ignoro la falta de compatibilidad de Firefox 2 para inline-block y asumo que la gran mayoría de los usuarios ha actualizado a FF3, pero las búsquedas en Google no desenterraron ningún número para respaldar eso arriba. YMMV.)

Sin embargo, si la única opción es determinar la compatibilidad con JavaScript, deberá recurrir a la detección del agente de usuario. La clase YAHOO.env.ua de la clase biblioteca YUI es una parte útil del código que puede copiar y usar. (Tiene licencia BSD, no depende de otras partes de la biblioteca YUI y solo tiene entre 25 y 30 líneas sin comentarios)

Answer 4

Por cierto: hay un aseado way para implementar bloques en línea en varios navegadores en IE6 +, FF2 +, Opera y WebKit con CSS solo. (No es válido CSS, pero aún así es solo CSS.)

Answer 5

Christopher Swasey es bastante correcto.

He creado una demostración de jsFiddle de su técnica en http://ajh.us/test- bloque en línea .

El código es esencialmente:

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

Tenga en cuenta que esta misma técnica también funciona para detectar la compatibilidad con display: run-in .