Implementación en varios navegadores de bloque en línea en CSS

Recientemente, estaba creando un nuevo sitio web para mí y se me ocurrieron algunos efectos, pero encontré algunos problemas menores durante la implementación, como este bloque en línea. Afortunadamente, la mayoría de los problemas se resolvieron, así que los escribí para compartirlos.
Cuando creamos páginas web, a veces queremos que un elemento pueda definir el ancho y el alto como un bloque, y que también pueda ejecutarse continuamente como un elemento en línea normal. Por ejemplo, el lugar marcado con la línea roja en la siguiente imagen:


Normalmente usamos código como este para lograr tal efecto:


Aunque esto puede lograr el objetivo, el código aún no está lo suficientemente refinado ni flexible. De forma ideal lo podemos lograr con tan solo el siguiente código:


En este caso, necesitamos especificar el ancho, alto y la imagen de fondo para la etiqueta a. Sin embargo, el atributo de visualización predeterminado de la etiqueta a está en línea y el ancho y el alto no son válidos. Y si display:block se establece en a, aunque el problema del ancho y el alto se puede resolver, el elemento dividirá automáticamente las líneas y no podrá lograr el efecto que necesitamos. ¿Hay alguna manera de lograr lo mismo que la etiqueta img, que puede establecer el alto y el ancho sin romper la línea automáticamente?
La respuesta es sí. Opera y Webkit admiten una visualización de propiedades CSS2: inline-block. Usando este atributo, podemos lograr completamente el efecto que necesitamos en Opera, pero no funcionará en otros navegadores.
El atributo de visualización también tiene una visualización de valores menos utilizada: tabla en línea. El uso de este valor también puede lograr completamente el efecto que necesitamos. Esta propiedad es compatible correctamente con todos los navegadores excepto IE, pero... bueno, IE otra vez. Aunque todos los desarrolladores web odiarán enfrentarse a CSS, renunciar a IE equivale a renunciar al 70% de los usuarios, por lo que todavía tenemos que encontrar otras soluciones.
No tuve más remedio que buscarlo en Google y, de hecho, lo encontré. Como se señala en este artículo, si primero activa hasLayout de IE y luego configura su visualización: en línea, este elemento se convertirá en bloque en línea. De esta manera, podemos aprovechar esta característica irrazonable de IE y combinarla con algo de CSS. Hacks que brindan códigos CSS compatibles con varios navegadores:


A través de este código, puede lograr un bloque en línea que se comporte de manera consistente en varios navegadores. Sin embargo, este método tiene un pequeño inconveniente: no puede pasar la verificación CSS del W3C. Por supuesto, también es muy sencillo pasar la verificación. Puede emitir una hoja de estilo con el atributo inline-table para navegadores distintos de IE y emitir un CSS exclusivo de IE por separado para IE.