Mozilla Firefox 和 Internet Explorer 中的 CSS 不同输出答案

【问题标题】：CSS different output in mozilla firefox and internet explorerMozilla Firefox 和 Internet Explorer 中的 CSS 不同输出
【发布时间】：2018-09-27 18:22:44
【问题描述】：

我正在练习 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>

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

【问题讨论】：

标签： css html internet-explorer mozilla

【解决方案1】：

您的 svg 视图似乎是问题所在。

尝试例如

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

说实话，我无法提供任何信息来解释这种行为。但是我找到了这个topic，可能和原因有关。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

当我更改 svg viewBox 时，我在 mozilla 上得到了我想要的结果。但是对于 Internet Explorer，当我更改 svg viewBox 时什么也没发生。也许我会尝试添加一个专门用于 Internet Explorer 的样式表。

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

【讨论】：

啊抱歉，我没看 IE，只看 FF。在 IE 中，看起来 .frame1 的样式表可能是这种组合中的问题。对我来说，在 FF 中，宽度为 100% 的按比例放大与在 IE 中的工作方式不同。我尝试删除 width:100% 并且影响在 IE 中是“巨大的”，但在 FF 中没有。也许你想玩一下看看效果。