Question

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

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

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

谢谢。

Answer 1

我从网站上获取 HTML 并将其制作成一个片段进行测试（带有完整的 URL）请尝试一下并让我知道您看到了什么 - 它显示了我的 Safari（在 iPad IOS 上）上的图标，尽管它们是彼此略微重叠。

<!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 在做什么以及你为什么把它放在那里

Answer 2

您可以像这样用对象标签替换 img 标签。

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

与

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

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

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

2 个答案: