display-inline for media elements won’t trigger in IE6

[riddle]

/*
 * Add display for embedded HTML5 elements
 * Addresses display not defined in IE6/7/8/9 & FF3
 */

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

This code won’t work in IE6 because the selector audio[controls] isn’t recognized in IE6, making the whole rule ignored.

[riddle]

The easiest fix is to drop support for IE6.

Another easy fix is to divide the rule into two – making sure that IE6 only ignores the selector audio[controls].

[mathiasbynens]

Now that I think about it, why audio[controls] and not just audio?

[riddle]

Because <audio> is by default invisible – and when you set inline-block, you “add” one more space in page’s text flow (space before, audio element, no longer inline, space after).

[mathiasbynens]

Got it.

[necolas]

Thanks for pointing this out. I'm tempted to remove this ruleset entirely, because these elements default to display:inline in all browsers anyway.

@mathiasbynens By default, audio without controls is set to display:none, presumably to spare people the pain of an uncontrollable audio file playing. Could add audio:not([controls]) {display: none;} but will have to check if any browsers that support :not() don't use it to hide audio