CSS разные результаты в Mozilla Firefox и Internet Explorer - PullRequest
Новая
       28

CSS разные результаты в Mozilla Firefox и Internet Explorer

0 голосов
/ 27 сентября 2018

Я практикую CSS, и я столкнулся с этой проблемой.Я использую SVG в качестве фона.Я получаю желаемый результат, когда пытаюсь запустить его в Opera и Google Chrome, например: enter image description here

Но когда я пытаюсь запустить его в Mozilla, он выглядит какздесь есть несколько пробелов сверху и снизу: enter image description here

А также, в Internet Explorer svg выглядел гораздо более неуместным, например: enter image description here

Я пытался использовать сброс 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>

Я что-то упустил или мне нужно что-то удалить, чтобы получить желаемый результат (см. Первое изображение)?

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Похоже, проблема в вашем окне просмотра svg.

Попробуйте, например, 

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

Честно говоря, я не могу предоставить какую-либо информацию для объяснения этого поведения.Но я нашел эту тему , может быть, это связано с причиной.

0 голосов
/ 07 октября 2018

Я получил желаемый результат на mozilla, когда изменил svg viewBox.Но для Internet Explorer ничего не произошло, когда я изменил svg viewBox.Возможно, я попытаюсь добавить таблицу стилей, предназначенную специально для Internet Explorer.

PS Извините за поздний ответ, я заболел: / но сейчас я в порядке.Спасибо!

0 голосов
/ 27 сентября 2018

В своем HTML, попробуйте поменять позиции ваших ссылок main.css и reset.css в голове.Таблицы стилей загружаются в последовательности, с которой они связаны, и это может быть причиной того, что ваш сброс не работает должным образом.

...