img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    display: block;
    -ms-interpolation-mode: bicubic;
}

El CSS anterior se toma deTwitter Bootstrap lo que permite imágenes de respuesta. El único problema es que esto no tiene efecto en Firefox e IE.

En el siguiente caso:

<div class="row-fluid">
    <div id="logo" class="span4">
        <a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
    </div>
</div>

http://dev.netcoding.net/lowsglass/about-us/ - Aquí hay una página que muestra el problema.

En Firefox o IE, reduzca la página a 432px y verá que las imágenes ya no siguen el ancho máximo (mientras que por encima de 764px).

¿Cómo puedo solucionar esto, sin usar contenedores de imágenes, para que las imágenes sensibles funcionen en Firefox e IE?