79

背景画像を設定した div があります。

<div>Play Video</div>

次の CSS を使用します。

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景サイズは、Firefox、Safari、および Chrome で考慮されます。IE8 では、SVG は PNG ファイルに置き換えられます。ただし、IE9 および IE10 では、SVG ファイルのサイズが大幅に縮小されています。問題は、div の幅と高さに関連しているようです。150px の高さを追加すると、SVG は適切にレンダリングされます。小さくすると (つまり 100px)、グラフィックが縮小し始めます。

エクスプローラーでこの問題を解決する方法を見つけた人はいますか? div の幅と高さとは無関係に background-size 値を使用するように IE に指示する方法はありますか?

4

10 に答える 10

171

widthSVG にとがheight指定されていることを確認してください。Illustrator から生成する場合は、このオプションによって幅と高さが削除されるため、[レスポンシブ] ボックスがオフになっていることを確認してください。

于 2014-04-09T18:23:21.807 に答える
19

mbxtr が言ったように、幅と高さを SVG に追加すると、ほとんどうまくいきました。preserveAspectRatio="none slice"IEでレスポンシブに動作させるためにも追加する必要がありました。

于 2016-03-03T15:44:52.080 に答える
3

うーん、解決策はないようです。びっくりサプライズ。やっぱりIEです。私は次のコードを使用して終了しました：

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

私はよりクリーンなバージョンの方が気に入りましたが、このハックは IE8、9、および 10 (おそらく 11 ですが、テストしていません) を含むすべての最新のブラウザーで機能します。

于 2014-02-18T16:51:22.313 に答える
0

@mbxtrのソリューションを試しました

SVG の幅と高さが指定されていることを確認してください。Illustrator から生成する場合は、このオプションによって幅と高さが削除されるため、[レスポンシブ] ボックスがオフになっていることを確認してください。

それでも、Windows Chrome と IE ではうまくいきませんでした。フォントアイコンをエクスポートしていたので、フォントがある場合は、次のようにエクスポートしてください。

  • 「フォント：アウトラインに変換」
  • そして「レスポンシブ」は偽です

念のため、「縮小」のチェックも外しました...

于 2016-03-11T11:22:42.970 に答える
0

1.ジャバスクリプト

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }
  1. svg (元の高さ = 1050) を自分自身に直接追加 svg ファイル preserveAspectRatio="none" height="2100"
于 2016-06-15T06:07:48.247 に答える
0

含まれる要素 (検索入力の左側にある虫眼鏡など) の完全なサイトではない SVG 背景画像でも同様の問題がありました。

Illustrator CC で SVG を作成しましたが、Peter Collingridge の SVG オプティマイザーを実行して、不要なクラフトをすべて取り除くとうまくいきました。 http://petercollingridge.appspot.com/svg-optimiser

于 2014-08-18T14:21:27.993 に答える
0

Svg 背景画像サイズは、これらのプロパティを使用して IE と Chrome で同じにレンダリングされます

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
于 2019-03-18T11:00:38.343 に答える