IE11背景イメージのテキストがぼやけている

Question

私はボタン上でイメージスプライトを使用するウェブサイトで作業しています。 IE11を除いて私が試みた他のすべてのブラウザでは、私のスプライトのテキストは鮮明ですが、IE11ではテキストがぼやけています（画像参照）。

IE11 OFCあるぼやけ1。スプライトの幅は189ピクセル、高さは378ピクセルです。私は次のCSSを使用します：

button { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
} 

button:hover { 
    background-position: bottom; 
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
} 

これはちょうどIEの欠陥ですか、それとも私は実際に何かをすることはできますか？

ありがとうございます。

編集： <img src="lala.png">と同じ画像を挿入するだけで、テキストがぼやけていません。これは背景にのみ適用されます：/

Answer 1

これは通常のIEバグです。

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

私はまだ、このテーマへの解決策を見つけていません。

Answer 2

私は全くそれは、効率的なアクセスやSEOではありません、以下reasons-

1. のためスプライトとして、そのボタンを持っていないお勧めします - 画像内のテキストを読むことができるスクリーンリーダーや検索エンジンのクローラでもありません。
2. それは、よりゆっくりとあなたのサイトの負荷を行いますスプライト画像を、ダウンロードするには、追加のHTTPリクエストが必要です - あなたはボタンがはるかに作る場合を除き、それはページにレンダリングする必要がより大きく特にモバイル機器
3. にし、新しいフルサイズのiPadやプレミアムAndroidタブレット、最近のMacやプレミアムウィンドウラップトップなどの高密度デバイスでは、ぼかしの問題が発生します。明らかに画像を必要以上に大きくすると、画像が大きくなり、ポイント2から速度ペナルティが悪化します。
4. 今後いつでも配色を変更したい場合は、CSSカラープロパティを変更するだけで、新しいイメージを再生成する必要はありません。
5. 簡潔このボタンをCSSのスクリーンショットのように表示させるにはあなたはそれがこのように見える終わるthis-

   .text-button { 
       background: #b32e01; 
       border: none; 
       border-radius: 8px 8px 8px 0; 
       color: #ffffff; 
       cursor: pointer; 
       height: 3em; 
       outline: none; 
       padding: 1em 0; 
       text-transform: uppercase; 
       width: 12.5em; 
   } 
   
   .text-button:hover { 
       -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
       -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
       box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
   } 
   

   ようthis-

   <button class="text-button" type="button">Send Besked</button> 
   

   やCSSなどのマークアップ何かを使用している場合

（JSFiddle for sourceを参照してください） -

ラフモックアップ（比率を変更する、グラデーションを追加する、またはホバーの背景を変更することができますが、元のスプライトがホバー状態スプライトでの変換を知ることはできません）上記のすべての利点を備えています。特に、最初に投稿したテキストの問題を解決する必要があります。

Answer 3

私はぼかし効果をなくすことに成功しました：not（：ホバー）。背景画像をぼかさないように強制しているようです。

button:not(:hover) { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
} 

Answer 4

を追加

てみてください私はこの問題に遭遇しました。

境界線の半径と背景画像を異なる要素に保つために、背景画像をスパンの内側に配置しただけで、そのトリックが完了したようです。

.item { 
    border-radius: 8px 8px 8px 0; 
} 

.item span { 
    background-image:url('imagepath.png'); 
}