Question

我在网站中使用多边形背景我正在处理我希望高度保持在400px的位置，并且无论你如何调整高度，角度都保持在7％。我使用以下代码完成了这项工作：

<div style="width:100%;max-width:100%;margin-top:-0px;position:absolute;top:40px;overflow:hidden;background-color:rgba(155,0,0,0);">
    <div style="position:relative">
        <div id="backgroundImage1" style="overflow:hidden;">
            <svg width="4000" viewBox="0 0 4000 1200" preserveAspectRatio="none">

                <polygon points="0,0 0,400 4000,900 4000,500" style="fill:#525252;stroke:#525252;stroke-width:0;" />
            </svg>
        </div>
    </div>
</div>

我使用它的技巧使它悬挂在屏幕边缘（超过4000px）并希望它们永远不会使显示器变宽。

我遇到的问题是，这在Chrome，Firefox和Edge中完美呈现，但在IE中中断。它似乎缩放多边形以适应那里的屏幕。有人知道一些修复这个IE兼容性问题吗？

JS小提琴： https://jsfiddle.net/z81cxyjw/ 比较以下IE和＆amp; Chrome看看我的意思

Answer 1

来自MDN关于viewBox：

viewBox属性的值是由空格和/或逗号分隔的四个数字min-x，min-y，width和height的列表，它们指定用户空间中应该映射到边界的矩形由给定元素建立的视口，考虑属性preserveAspectRatio。

显然，IE在查找视口方面存在问题。添加height属性和/或指定viewPort属性 - 这至少在IE11中有效，我还没有在其他版本中查看过。

＆＃13;

    <div style="width:100%;max-width:100%;margin-top:-0px;position:absolute;top:40px;overflow:hidden;background-color:rgba(155,0,0,0);">
        <div style="position:relative">
            <div id="backgroundImage1" style="overflow:hidden;">
                <svg width="4000" height="1200" viewPort="0 0 4000 1200" preserveAspectRatio="none">
                    
                    <polygon points="0,0 0,400 4000,900 4000,500" style="fill:#525252;stroke:#525252;stroke-width:0;" />
                </svg>
            </div>
        </div>
    </div>

＆＃13;

SVG无法在IE中正确呈现

1 个答案: