button要素内の画像をCSSでグレースケール化したい

button要素内の画像をCSSでグレースケール化したい

下記のように、button要素にdisabled属性が付けられている場合だけ、内部のimg要素の画像をグレースケール化したいです。

<button disabled><img src="URL"/></button>

グレースケール化とその解除については、JavaScriptで何らかの関数を呼び出したりするのではなく、CSSでする方法を探しています。
↓こんな風に書けたら理想的です。

button[disabled] > img { /* ここでグレースケール化の記述 */ }

対象ブラウザはIE8～11、GoogleChrome(43?)です。
IE8～9なら filter: gray、Chromeなら-webkit-filter: grayscale(1);でいけるのですが、IE10～11ではどうにもならず困っています。