Question

我有一个简单的放大svg，我在输入框中用作背景图像。

它适用于Chrome，但IE 10,11或边缘浏览器中没有任何内容。

为什么它不会出现在IE浏览器中。

＆＃13;

.search{
  border-radius: 4px; 
  border: 1px solid lightgrey;
  max-width: 400px;
  padding: 10px 10px 10px 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1' viewBox='0 0 22 22' %3E%3Cpath d='M14.92 14.07l6.04 6.04c.23.24.23.62 0 .86-.24.23-.62.23-.85 0l-6.03-6.04C12.57 16.22 10.63 17 8.5 17 3.8 17 0 13.2 0 8.5S3.8 0 8.5 0 17 3.8 17 8.5c0 2.13-.78 4.08-2.08 5.57zM8.5 16c4.14 0 7.5-3.36 7.5-7.5C16 4.36 12.64 1 8.5 1 4.36 1 1 4.36 1 8.5 1 12.64 4.36 16 8.5 16z' fill='#6f6f6f' fill-rule='nonzero'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 8px center;
      background-size: 1.675em;
}

＆＃13;

<form action="">
  <input type="text" placeholder="Search" class="search"> 
</form>

＆＃13;

Answer 1

将此添加到标题

<meta http-equiv="x-ua-compatible" content="ie=edge">

CSS - 后台svg没有在IE中显示

1 个答案: