Изображение загружается в Chrome, но не в Firefox - PullRequest
Новая
       6

Изображение загружается в Chrome, но не в Firefox

0 голосов
/ 06 ноября 2019

Я беру отзывчивый класс веб-дизайна, и я столкнулся с безумно странной проблемой. Логотип, который я делаю для своего поддельного веб-сайта электронной коммерции, не загружается в Firefox, но в Chrome. Мой профессор имеет многолетний опыт работы с HTML / CSS / JS, и даже не может понять, почему эта проблема происходит. Я узнал, что если я изменю ширину изображения на определенную величину, а не на 100% в моем CSS, это работает. Но почему, черт возьми, он не работает в Firefox, если в Chrome он установлен на 100%?

Вот мой HTML (часть, которая важна, по крайней мере, прежде чем вы спросите, да, язакрыл все важные теги, такие как body, main, html и т. д.) 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cinzel:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="display.css" type="text/css">
</head>


<body>
    <div id="particles-js"></div>
    <script src="javascript/particles.js"></script>
    <script src="javascript/app.js"></script>


  <header>
        <div class="logostuff">
            <a id="logoanchor" href="index.html"><img id="logo" src="images/LogoMeta.svg" alt="META website logo"></a>
            <a id="cartanchor" href="cart.html"><img id="cartimg" src="images/cart.svg" alt="Cart image"></a>
        </div>
        <h4 id="tagline">Let the professionals build it for you!</h4>
    <nav>
    <ul>
      <li><a href="about.html">About Us</a></li>
      <li style="margin-bottom: 0.3rem;"><a href="merch.html"> </a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
  </header>

Вот соответствующие биты CSS 

.logostuff {
  justify-content: space-between;
  display: flex;
}

.logoanchor {
  width: 100%
}

#cartimg {
  width: 100%;
  max-width: 60px;
}

#cartanchor {
  margin-top: 0.9rem;
  width: 20%;
  max-width: 320px;
}

#logo {
  width: 100%;
}

Кроме того, javascript не имеет ничего общего с этой проблемой, так какпроблема все еще сохраняется без него. Когда я нацеливаюсь на свое изображение в инструментах разработки Firefox, оно говорит, что это 0x0, когда оно должно занимать столько места, сколько ему позволено, все еще позволяя моей SVG-корзине существовать рядом с ним.

https://imgur.com/a/yBHtdzs Вот альбом imgur о том, как он выглядит в обоих браузерах.

РЕДАКТИРОВАТЬ 1: Вот SVG логотипа https://svgur.com/s/FxL

1 Ответ

0 голосов
/ 06 ноября 2019

Я попробовал код с codepen в chrome и firefox с svg, предоставленным вами. Проблема здесь в том, что у logoanchor вместо селектора идентификаторов есть селектор класса. Измените .logoanchor на #logoanchor в вашем CSS-файле.

...