WebKitの画像置換のバグの解決方法

バグの内容

下記のように画像置換した場合、WebKitではspan要素のテキスト分の幅が保持されてa要素の幅が広がってしまいます。

HTML
<p><a href="#" class="ir"><span>画像置換テキスト</span></a>左のボタンは画像置換をおこなっています。</p>
<p style="padding-left:102px;">画像置換テキスト</p>
CSS
.ir {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.ir span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 32px; /* ボタン画像の高さ */
    overflow: hidden;
    padding: 0 0 0 102px; /* ボタン画像の幅 */
    background: url(..) no-repeat 0 0;
}

デモページをみる

Google Chromeでのスクリーンショット

解決方法

これを解決するには、画像置換をしているspan要素にmax-width: 0;を指定します。

CSS
.ir span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    max-width: 0; /* for WebKit bug */
    height: 32px;
    overflow: hidden;
    padding: 0 0 0 102px;
    background: url(..) no-repeat 0 0;
}

デモページをみる

Google Chromeでのスクリーンショット

まさかmax-width0にすることになるなんて...。

おまけ

Vimのプラグインneocomplcache.vimのスニペット。css.snipにコピペして、irと入力して展開です。
snippet	imagereplacement
alias	ir
    display: inline-block;
    ${1:*}display: inline;
    $1zoom: 1;
    width: 0;
    max-width: 0; /* for WebKit bug */
    height: ${2}px;
    overflow: hidden;
    padding: 0 0 0 ${3:$2}px;
    background: url(${4}) no-repeat ${5:0 0};