Representación flotante extraña en Chrome cuando se utilizan consultas de medios

He creado un menú simple y de respuesta que, de forma predeterminada, está distribuido verticalmente, pero si la resolución es más amplia que 400px, lo establezco horizontalmente.

Verticalmente simplemente usodisplay: block Y para la versión horizontal lo hago.float: left en:first-child yfloat: right en:last-child (porque quiero que alcancen los bordes de la envoltura).

Si marca el violín con una resolución lo suficientemente amplia, debería ver tres cuadros rojos dispuestos horizontalmente. Cambiar el tamaño del iframe y deben cambiar a un diseño vertical. Ahora, aquí está mi problema, cuando redimensionas el iframe de nuevo al diseño horizontal del:last-child El elemento de menú no se procesará correctamente en la versión 26.0.1410.63 de Chrome en Ubuntu 12.10 (no he probado otras versiones de Chrome), aunque funciona como debería hacerlo en Firefox.

http://jsfiddle.net/G2h9U/

Esto me parece un error de Chrome, pero ¿alguien ha experimentado lo mismo y hay una solución?

Respuestas a la pregunta(1)

Su respuesta a la pregunta