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

似乎您的svg视图框出了问题。

尝试例如

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

说实话，我无法提供任何信息来解释此行为。但是我发现了这个topic，也许与原因有关。

Answer 2

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

Answer 3

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

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

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

3 个答案: