Internet Explorer 中的背景大小 css 属性

Question

您好，我使用的是 IE 11，并且遇到了 background-size:cover 属性的问题。现在，在你说这个问题之前，这个问题已经被问及并得到了回答。我查看了所有这些解决方案，但他们没有解决它。我正在使用引导程序 .well 我试过<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"/>

还有<meta http-equiv="X-UA-Compatible" content="IE=EDGE,chrome=1"/>

最后，这是我当前应该解决问题的 css。它适用于除 IE 之外的所有浏览器。我正在使用 IE 11

CSS：

#well1 {
margin-top:600px;
background: url('/images/arch-grey.svg') center;
background-repeat: no-repeat;
background-size: cover; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(114, 127, 139);
z-index: 1;
}

HTML：

                    <div class="well" id="well1">
                    <h3></h3>
                    <h1>Forms</h1>
                    <h2></h2>
                    <p>Pellentesque habitant morbi tristique senectus et netus et
                        malesuada fames ac turpis egestas. Vestibulum tortor quam,
                        feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
                        libero sit amet quam egestas semper. Aenean ultricies mi vitae
                        est. Mauris placerat eleifend leo.</p>
                    <a
                        th:href="@{/forms/}"
                        class="arrow">Go to Forms</a>
                </div>

Answer 1

根据CanIUse，IE（和 Edge）无法正确缩放 SVG 文件。

确保 SVG 具有 width、height 和 viewBox 属性以及这些 workaround CSS rules。

或者，看看this question。