html - 仅将图像放入 Internet Explorer 时出现 WEBFLOW HTML/CSS 问题

标签 html css internet-explorer explorer webflow

我一直在尝试让 svg 动画只显示在非 ie 10/11 的浏览器中，因为它没有显示我想要的样子。我得到了一些检测浏览器的代码的帮助，但现在我需要帮助将 svg 动画放入代码并将图像放入代码的唯一 ie 10/11 部分。

我已经尝试将 svg 动画复制粘贴到其中，但是当我这样做时，ie 或 chrome 上没有显示任何内容。代码的顶部是动画，底部是检测浏览器的部分。

<div> <svg id="isi-wave" xmlns="http://www.w3.org/2000/svg" viewBox="519 0 2022 1225.25"> <g id="wave"> <path d="M5983.25,234v991.28H0V233.7c8.66.74,17.26,1.13,26,1.52l.23.18C209.57,244,520.63,39,785.09,39c242.62,0,530.06,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C1705.39,244,2016.44,39,2280.9,39c242.62,0,530.06,179.27,710.72,195v-.27c8.67.74,17.26,1.13,26,1.52l.23.18C3201.2,244,3512.26,39,3776.71,39c242.62,0,530.07,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C4697,244,5008.07,39,5272.53,39,5515.15,39,5802.6,218.26,5983.25,234Z" fill="#00a6dd"/> <path d="M5983.25,187.32v51C5707.9,230.8,5516.38,86.11,5214.88,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.14.56-21.88.69-26,.62v0c-275.35-7.47-466.86-152.16-768.37-152.16-237.07,0-397.66,115.57-615.17,145-9.25,1.23-18.57,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35h-.23c-30.13.56-21.88.69-25.95.62v0c-275.35-7.47-466.87-152.16-768.37-152.16-237.07,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.13.56-21.88.69-26,.62C1220.45,230.8,1028.94,86.11,727.44,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35H26c-30.14.56-21.89.69-26,.62v-51c35.7,6.16,50.4,9.7,110.6,9.7C276.1,197,592.14,0,841.93,0c218.51,0,473.38,146.92,653.88,187.32,35.7,6.16,50.4,9.7,110.6,9.7C1771.91,197,2088,0,2337.74,0c218.51,0,473.38,146.92,653.88,187.32h0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.32-197,218.52,0,473.38,146.92,653.88,187.32v0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.33-197C5547.88,0,5802.75,146.92,5983.25,187.32Z" fill="#0045ab"/> </g> <g id="bubbles"> <circle id="bubble_1" data-name="bubble 1" cx="707.51" cy="109.89" r="70.69" fill="#fff" opacity="0.57"/> <circle id="bubble_2" data-name="bubble 2" cx="906.53" cy="83.33" r="49.13" fill="#fff" opacity="0.4"/> <circle id="bubble_3" data-name="bubble 3" cx="1267.49" cy="128.73" r="101.27" fill="#fff" opacity="0.35"/> <circle id="bubble_4" data-name="bubble 4" cx="1528.18" cy="88.09" r="61.16" fill="#fff" opacity="0.65"/> <circle id="bubble_5" data-name="bubble 5" cx="1892.64" cy="175.38" r="128.84" fill="#fff" opacity="0.52"/> <circle id="bubble_6" data-name="bubble 6" cx="2081.9" cy="83.86" r="44.87" fill="#fff" opacity="0.56"/> <circle id="bubble_7" data-name="bubble 7" cx="2339.83" cy="103.63" r="76.7" fill="#fff" opacity="0.7"/> </g> <style> #isi-wave #wave { -webkit-animation: moveWave 4s linear 0s infinite; animation: moveWave 4s linear 0s infinite; } #isi-wave #bubble_1 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -1.8s infinite alternate; animation: moveIn 2s ease-in-out -1.8s infinite alternate; } #isi-wave #bubble_2 { -webkit-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); transform: translate(0px, 200px); -webkit-animation: moveIn 2s ease-in-out -2.28s infinite alternate; animation: moveIn 2s ease-in-out -2.28s infinite alternate; } #isi-wave #bubble_3 { -webkit-transform: translate(0px, 230px); -ms-transform: translate(0px, 230px); transform: translate(0px, 230px); -webkit-animation: moveIn 2s ease-in-out -3.2s infinite alternate; animation: moveIn 2s ease-in-out -3.2s infinite alternate; } #isi-wave #bubble_4 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -3.8s infinite alternate; animation: moveIn 2s ease-in-out -3.8s infinite alternate; } #isi-wave #bubble_5 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -0.92s infinite alternate; animation: moveIn 2s ease-in-out -0.92s infinite alternate; } #isi-wave #bubble_6 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -1.32s infinite alternate; animation: moveIn 2s ease-in-out -1.32s infinite alternate; } #isi-wave #bubble_7 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -2.04s infinite alternate; animation: moveIn 2s ease-in-out -2.04s infinite alternate; } @-webkit-keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } @keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } </svg> 
  

<style type="text/css">
    body {
        font: 1.25em sans-serif;
        background-color:white;

    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        body{
            background-color:blue;
            <img alt="" src="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png" 
            srcset="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-500.png 500w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-800.png 800w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1080.png 1080w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1600.png 1600w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png 1920w" 
            sizes=(max-width: 1920px) 100vw, 1920px" />
        }
    }
</style>

我希望 png 图像至少能显示出来，我想我把它放对了，但没有显示任何内容。我不熟悉 html/css，这就是我在 webflow 中这样做的原因。

最佳答案

您可以在 JavaScript 中测试浏览器是否为 IE，如果是 IE，则清除 svg 并显示图像。如果不是 IE，则显示 svg。你应该使用 background-image当你想显示图像时在 css 中:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            /* IE10+ specific styles go here */
            body {
                background-image: url(https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png)
            }
        }

我也做了一个demo，你可以引用一下:

//check if the broswer is IE
if (!!window.ActiveXObject || "ActiveXObject" in window) { document.body.innerHTML = "";}
body {
            font: 1.25em sans-serif;
            background-color: white;
        }

        #isi-wave #wave {
            -webkit-animation: moveWave 4s linear 0s infinite;
            animation: moveWave 4s linear 0s infinite;
        }

        #isi-wave #bubble_1 {
            -webkit-transform: translate(0px, 220px);
            -ms-transform: translate(0px, 220px);
            transform: translate(0px, 220px);
            -webkit-animation: moveIn 2s ease-in-out -1.8s infinite alternate;
            animation: moveIn 2s ease-in-out -1.8s infinite alternate;
        }

        #isi-wave #bubble_2 {
            -webkit-transform: translate(0px, 200px);
            -ms-transform: translate(0px, 200px);
            transform: translate(0px, 200px);
            -webkit-animation: moveIn 2s ease-in-out -2.28s infinite alternate;
            animation: moveIn 2s ease-in-out -2.28s infinite alternate;
        }

        #isi-wave #bubble_3 {
            -webkit-transform: translate(0px, 230px);
            -ms-transform: translate(0px, 230px);
            transform: translate(0px, 230px);
            -webkit-animation: moveIn 2s ease-in-out -3.2s infinite alternate;
            animation: moveIn 2s ease-in-out -3.2s infinite alternate;
        }

        #isi-wave #bubble_4 {
            -webkit-transform: translate(0px, 210px);
            -ms-transform: translate(0px, 210px);
            transform: translate(0px, 210px);
            -webkit-animation: moveIn 2s ease-in-out -3.8s infinite alternate;
            animation: moveIn 2s ease-in-out -3.8s infinite alternate;
        }

        #isi-wave #bubble_5 {
            -webkit-transform: translate(0px, 210px);
            -ms-transform: translate(0px, 210px);
            transform: translate(0px, 210px);
            -webkit-animation: moveIn 2s ease-in-out -0.92s infinite alternate;
            animation: moveIn 2s ease-in-out -0.92s infinite alternate;
        }

        #isi-wave #bubble_6 {
            -webkit-transform: translate(0px, 210px);
            -ms-transform: translate(0px, 210px);
            transform: translate(0px, 210px);
            -webkit-animation: moveIn 2s ease-in-out -1.32s infinite alternate;
            animation: moveIn 2s ease-in-out -1.32s infinite alternate;
        }

        #isi-wave #bubble_7 {
            -webkit-transform: translate(0px, 220px);
            -ms-transform: translate(0px, 220px);
            transform: translate(0px, 220px);
            -webkit-animation: moveIn 2s ease-in-out -2.04s infinite alternate;
            animation: moveIn 2s ease-in-out -2.04s infinite alternate;
        }

        @-webkit-keyframes moveIn {
            to {
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
            }
        }

        @keyframes moveIn {
            to {
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
            }
        }

        @-webkit-keyframes moveWave {
            to {
                -webkit-transform: translate(-1495.81px, 0px);
                transform: translate(-1495.81px, 0px);
            }
        }

        @keyframes moveWave {
            to {
                -webkit-transform: translate(-1495.81px, 0px);
                transform: translate(-1495.81px, 0px);
            }
        }

        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            /* IE10+ specific styles go here */
            body {
                background-image: url(https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png)
            }
        }
<div>
        <svg id="isi-wave" xmlns="http://www.w3.org/2000/svg" viewBox="519 0 2022 1225.25"> <g id="wave"> <path d="M5983.25,234v991.28H0V233.7c8.66.74,17.26,1.13,26,1.52l.23.18C209.57,244,520.63,39,785.09,39c242.62,0,530.06,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C1705.39,244,2016.44,39,2280.9,39c242.62,0,530.06,179.27,710.72,195v-.27c8.67.74,17.26,1.13,26,1.52l.23.18C3201.2,244,3512.26,39,3776.71,39c242.62,0,530.07,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C4697,244,5008.07,39,5272.53,39,5515.15,39,5802.6,218.26,5983.25,234Z" fill="#00a6dd" /> <path d="M5983.25,187.32v51C5707.9,230.8,5516.38,86.11,5214.88,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.14.56-21.88.69-26,.62v0c-275.35-7.47-466.86-152.16-768.37-152.16-237.07,0-397.66,115.57-615.17,145-9.25,1.23-18.57,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35h-.23c-30.13.56-21.88.69-25.95.62v0c-275.35-7.47-466.87-152.16-768.37-152.16-237.07,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.13.56-21.88.69-26,.62C1220.45,230.8,1028.94,86.11,727.44,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35H26c-30.14.56-21.89.69-26,.62v-51c35.7,6.16,50.4,9.7,110.6,9.7C276.1,197,592.14,0,841.93,0c218.51,0,473.38,146.92,653.88,187.32,35.7,6.16,50.4,9.7,110.6,9.7C1771.91,197,2088,0,2337.74,0c218.51,0,473.38,146.92,653.88,187.32h0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.32-197,218.52,0,473.38,146.92,653.88,187.32v0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.33-197C5547.88,0,5802.75,146.92,5983.25,187.32Z" fill="#0045ab" /> </g> <g id="bubbles"> <circle id="bubble_1" data-name="bubble 1" cx="707.51" cy="109.89" r="70.69" fill="#fff" opacity="0.57" /> <circle id="bubble_2" data-name="bubble 2" cx="906.53" cy="83.33" r="49.13" fill="#fff" opacity="0.4" /> <circle id="bubble_3" data-name="bubble 3" cx="1267.49" cy="128.73" r="101.27" fill="#fff" opacity="0.35" /> <circle id="bubble_4" data-name="bubble 4" cx="1528.18" cy="88.09" r="61.16" fill="#fff" opacity="0.65" /> <circle id="bubble_5" data-name="bubble 5" cx="1892.64" cy="175.38" r="128.84" fill="#fff" opacity="0.52" /> <circle id="bubble_6" data-name="bubble 6" cx="2081.9" cy="83.86" r="44.87" fill="#fff" opacity="0.56" /> <circle id="bubble_7" data-name="bubble 7" cx="2339.83" cy="103.63" r="76.7" fill="#fff" opacity="0.7" /> </g> </svg>
</div>

关于html - 仅将图像放入 Internet Explorer 时出现 WEBFLOW HTML/CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56907032/

上一篇：javascript - 如何在下一次迭代之前在 JavaScript 循环中添加延迟？

下一篇：html - 使用 css 选择选择菜单的一个选项后，如何更改文本颜色？

相关文章：

php - 在不使用提交按钮的情况下使用下拉列表更新表值

jquery - 防止移动设备上的 jQuery ContextMenu 子菜单项大小增加

css - SVG 动画结合@keyframes

javascript - Canvas 中的抗锯齿大文本

javascript - 将鼠标悬停在 IE 中的选择列表(窗口)中的选项上不会生成工具提示

html - 字体颜色与原始设计不同(电子邮件通讯)

javascript - Firefox 出现奇怪的未终止字符串文字错误

html - 如何在相同高度拍摄照片？

html - 在bootstrap中创建后台网站

c# - Server.Transfer 后 IE 和 Firefox 的不同回发行为

©2024 IT工具网  联系我们