Warning: include(/home/kosei27/www/culture27/culture27/inc/shared-google-analytics.php) [function.include]: failed to open stream: No such file or directory in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 15

Warning: include() [function.include]: Failed opening '/home/kosei27/www/culture27/culture27/inc/shared-google-analytics.php' for inclusion (include_path='.:/usr/local/php/5.2/lib/php') in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 15

Warning: include(/home/kosei27/www/culture27/culture27/inc/module-facebook-like-code.php) [function.include]: failed to open stream: No such file or directory in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 31

Warning: include() [function.include]: Failed opening '/home/kosei27/www/culture27/culture27/inc/module-facebook-like-code.php' for inclusion (include_path='.:/usr/local/php/5.2/lib/php') in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 31

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};

Warning: include(/home/kosei27/www/culture27/culture27/inc/shared-body-end-js.php) [function.include]: failed to open stream: No such file or directory in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 197

Warning: include() [function.include]: Failed opening '/home/kosei27/www/culture27/culture27/inc/shared-body-end-js.php' for inclusion (include_path='.:/usr/local/php/5.2/lib/php') in /home/kosei27/www/culture27/blog/2011/03/webkit_image_replacement.php on line 197