CSS mozilla firefox 和 internet explorer 中的不同输出

Question

我正在练习 css，我遇到了这个问题。我正在使用 svg 作为背景。当我尝试在 Opera 中运行和 Google Chrome 时，我得到了我想要的结果，如下所示：

但是当我在 mozilla 中尝试运行时，它看起来像这样，顶部和底部有几个空格：

而且，在 Internet Explorer 中，svg 显得格格不入，如下所示：

我试过使用 css 重置，但没有任何反应。

这是我的 svg 代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 22.58">
<defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="15.6" y1="9.41" x2="10.68" y2="22.94" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#65ffb7"/><stop offset="1" stop-color="#47f2d0"/></linearGradient></defs>
<title>landing bg</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="10.54 0 0 16.03 9.31 22.58 24 22.58 24 0 10.54 0"/></g></g></svg>

CSS代码

body
{
    background-color: white;

}

.frame1
{
    background: #000000 url('../images/landing_bg.svg');
    background-repeat: no-repeat;
    background-position: right;
    height: 900px;
    width: 100%;
    position: absolute;
    min-width: 900px;
    top: 0;
    right: 0;
}

HTML代码

<!DOCTYPE html>
<html>
    <head>

<link rel = "stylesheet" type = "text/css" href = "main page/main.css">
<link rel = "stylesheet" type = "text/css" href = "main page/reset.css">
</head>

<body>
    <div class = "frame1">

    </div>
</body>

我是不是遗漏了什么或者我应该删除什么以获得我想要的结果（见第一张图片）？

Answer 1

在您的 HTML 中，尝试调换头部的 main.css 和 reset.css 链接的位置。样式表按它们链接的顺序加载，这可能是您的重置未按预期工作的原因。

Answer 2

看来问题出在你的 svg viewbox 上。

尝试例如

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">

老实说，我无法提供任何信息来解释这种行为。但是我发现了这个topic，可能跟这个原因有关

Answer 3

当我更改 svg viewBox 时，我在 mozilla 上得到了我想要的结果。但是对于 Internet Explorer，当我更改 svg viewBox 时没有任何反应。也许我会尝试添加专用于 Internet Explorer 的样式表。

P.S。抱歉回复晚了，我生病了：/但我现在很好。谢谢！

CSS mozilla firefox 和 internet explorer 中的不同输出

CSS different output in mozilla firefox and internet explorer

html

css

internet-explorer

mozilla