CSS Max-Width in IE8

Question

For my input, which can either have classname="half" or "half.not-placeholder-value", Firebug shows both inputs to have a set, fixed width of 25em.

input.half, input.half.not-placeholder-value {
    max-width: 25em;
}

Yet, according to Developer Tools, IE8 doesn't seem to use this particular max-width attribute. I say "doesn't seem to use" since Firefox's behavior differs with IE8 with respect to this attribute.

But the MDN docs say that IE7 supports max-width. Am I missing something?

Answer 1

This is not really an IE8 issue since IE8 does support the max-width attribute but only when given a defined width first.

input.half, input.half.not-placeholder-value {
    width: 100%;
    max-width: 25em;
}

Answer 2

Use IE8 css with width? First part targets IE, second part undoes it for IE9+.

input.half, input.half.not-placeholder-value {
    max-width: 25em;
    width:25em\9; /* IE 8 */
}
:root input.half, input.half.not-placeholder-value {
    width:inherit\9; /* IE 9+ */
}