时间戳

首页 > 解决方案 > 为什么这些图标显示在 Chrome 上而不显示在 Safari 上？

javascript - 为什么这些图标显示在 Chrome 上而不显示在 Safari 上？

问题描述

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

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

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

谢谢你。

标签： javascripthtmlcss

解决方案

我从网站上获取了 HTML 并将其制成一个片段进行测试（带有完整的 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 在做什么以及为什么把它放在那里

推荐阅读