3

デスクトップWebkitでは、画像は問題なく正常に表示されます。モバイルWebkit（iPad iOS 5など）で表示すると、まぶしい白い境界線が表示されます。要素の比率が固定されているため、background-imageとbackground-sizeを使用していますが、画像ソース自体は任意のランダムな比率にすることができます。

JSFiddle：

http://jsfiddle.net/tokyotech/A2zAv/

HTML：

<img />

CSS：

body {
    background: #666; }

img {
    width: 8em;
    height: 8em;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1),
        0 1px 0 rgba(0,0,0,0.5) inset;
    background-size: cover;    
    border-radius: 0.4em;
    background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg); 
}

ここに画像の説明を入力してください

4

1 に答える 1

5

これは、. を指定しない場合に発生する奇妙な問題ですimg src。ブラウザは、要素が存在するがコンテンツがないことを示したいため、境界線で囲みます。imgHTML で のソースを宣言することで、これを修正できます。

このフィドルを試してください: http://jsfiddle.net/A2zAv/3/

img src を宣言したくない場合は、画像に img 要素を使用しないでください。代わりに div を使用して、このレンダリングの問題を回避できます。これによりcontain、必要に応じてコンテナにイメージを送信できます。

http://jsfiddle.net/A2zAv/4/

imgさらに別の方法として、どうしてもタグを使用したい場合は、画像の src に 1px x 1px の透明なスペーサー gif を挿入することもできます。

詳細については、IMG タグの奇妙な境界線を参照してください。

于 2013-03-14T20:15:01.583 に答える