为什么这些图标显示在 Chrome 上而不显示在 Safari 上？ [关闭]答案

【问题标题】：Why are these icons showing on Chrome but not on Safari? [closed]为什么这些图标显示在 Chrome 上而不显示在 Safari 上？ [关闭]
【发布时间】：2021-05-31 11:49:18
【问题描述】：

我将 website 作为 Odin 项目课程的一部分，出于某种原因，社交媒体图标（Facebook、Twitter 和 Instagram）显示在 Chrome 上，但没有显示在 Safari 上。

我试图清除 Safari 上的缓存和历史记录。

谁能指出兼容性问题以及如何解决？

谢谢。

【问题讨论】：

这能回答你的问题吗？ Svg image element not displaying in Safari
不幸的是@Jimenemex 没有解决我的问题。我使用了
你添加了对象的高度和宽度吗？

标签： javascript html css

【解决方案1】：

我从网站上获取 HTML 并将其制成 sn-p 以进行测试（带有完整的 URL）它们彼此略微重叠。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Resturant</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://oasaleh.github.io/restaurant/index.css">
  <link rel="icon" href="https://oasaleh.github.io/restaurant/resources/tabIcon.png">
</head>

<body>
  <div id="content">
    <section id="header" class="undefined">
      <header id="title-bar" class="undefined">
        <p id="undefined" class="title">Halal Guys</p>
      </header>
    </section>
    <div id="nav-bar" class="undefined"><button id="Menu" class="nav bar item" href="">Menu</button><button id="Catering" class="nav bar item" href="">Catering</button><button id="ContactUs" class="nav bar item" href="">Contact Us</button></div>
    <div id="contentWindow" class="undefined">
      <ul id="menu" class="undefined">
        <li class="menu item">
          <p class="menu item name">Beef Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/beef-gyro-platter-530x530.jpeg"> </li>
        <li class="menu item">
          <p class="menu item name">Chicken Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/chicken-platter-530x530.jpeg"> </li>
        <li class="menu item">
          <p class="menu item name">Combo Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/combo-platter-530x530.jpeg"> </li>
        <li class="menu item">
          <p class="menu item name">Falafel Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/falafel-platter-530x530.jpeg"> </li>
      </ul>
    </div>
    <footer id="footerSection" class="undefined">
      <section id="socialMediaContact" class="undefined">
        <ul class="socialmedia list">
          <li class="socialmedia item"> <img class="social icon" id="iconFacebook" src="https://oasaleh.github.io/restaurant/resources/photos/icons/facebook-icon.svg"> </li>
          <li class="socialmedia item"> <img class="social icon" id="iconTwitter" src="https://oasaleh.github.io/restaurant/resources/photos/icons/twitter-icon.svg"> </li>
          <li class="socialmedia item"> <img class="social icon" id="iconInstagram" src="https://oasaleh.github.io/restaurant/resources/photos/icons/instagram-icon.svg"> </li>
        </ul>
      </section>
      <section id="rights" class="undefined">
        <div>
          <p>All Rights Reserved 2021</p>
        </div>
      </section>
    </footer>
  </div>
  <!--    <script src="https://oasaleh.github.io/restaurant/main.js"></script> -->


</body>

</html>

但是，实际网站什么也没显示，在检查时我看到有一个 main.js 脚本。这是做什么的？乍一看，它好像包含页面的 HTML。我怀疑但不知道这会以某种方式覆盖页面中的实际 HTML。

建议：试试没有这个 main.js 的页面，看看会发生什么。然后调查这个 main.js 在做什么以及为什么把它放在那里

【讨论】：

您的帖子让我意识到问题出在我的 AdBlocker 上！只是为了回答您的问题，main.js 是呈现 html 的 javascript。我正在使用 webpack 构建和捆绑。

【解决方案2】：

你可以像这样用object标签替换img标签。

<img src="instagram-icon.svg">

与

<object data="instagram-icon.svg" type="image/svg+xml"></object>

试试这个代码，如果它不起作用，请告诉我。

【讨论】：

它不工作。我用
你添加了对象的高度和宽度吗？

【解决方案3】：

我要感谢每一位参与并提供帮助的人！但是，问题是我的 AdBlocker！它正在删除社交媒体图标！

【讨论】：