桌面版 Safari 忽略 CSS

问题描述 投票：0回答：0

我目前正在尝试修复 Safari 网站上的一些 CSS/（HTML/JS？）错误，特别是桌面版本。由于我自己没有桌面版 Safari，因此我使用浏览器堆栈在 Safari 上查看我的网站。问题是我页面上的两个按钮都有背景，但只有一个有焦点类（它应该添加背景，但在 Safari 上会部分被忽略，因为有时没有添加它，我必须手动添加它） 。有谁知道为什么会发生这种情况？看起来很简单，只需添加一个添加背景颜色的类即可。

CSS

@media (max-width: 1000px) {
  .container {
    width: 90%;
  }
}

@media (max-height: 600px) {
  .wrapper {
    height: 70%;
  }
}

p {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #121212;
}

/* Portfolio Header */

#header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Poppins-ExtraBold", sans-serif;
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 10px;
  background-image: -o-linear-gradient(
          45deg,
          #4158d0 -10%,
          #c850c0 40%,
          #ffb116 100%
  );
  background-image: linear-gradient(
          45deg,
          #4158d0 -10%,
          #c850c0 40%,
          #ffb116 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

#subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Poppins-Bold", sans-serif;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 30px;
  margin-bottom: 75px;
  color: white;
}

/* Container */

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.container {
  background-color: #282c34;
  border-radius: 25px;
  text-align: center;
  width: 750px;
}

/* Tabs */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 3px solid #1c1b1b;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  font-weight: 700;
  font-size: 26px;
  font-family: Consolas, monospace;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 18px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: black;
}

/* reset pre tag */
pre {
  margin: 0;
  padding: 0;
}

.tab button:focus {
  background-color: rgb(197, 197, 197);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(197, 197, 197);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(197, 197, 197);
}

/* Style the tab content */
.tabcontent {
  display: none;
  height: 396px;
  font-size: 22px;
  border: 3px solid #121212;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  font-family: Consolas, monospace;
  text-align: left;
  padding: 6px 12px;
  border-top: none;
}

.console {
  padding: 10px 22px 2px 22px;
}

#Console,
#Code {
  position: relative;
}

/* adjusting stack overflow style */
#Code pre code.hljs {
  padding: 1em 1em 0 1em;
}

/* Gets added whenever a tab button is pressed */

.focused {
  background-color: rgb(197, 197, 197);
}

/* Run Code Button */

.run {
  background-color: rgb(44, 156, 0);
}

.stop {
  background-color: rgb(204, 2, 2);
}

.stop .button__icon {
  width: 28px;
}

.button {
  /* position: absolute; */
  /* bottom: 8%; */
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 130px;
  height: 40px;
  margin-left: 1.5%;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Arial", sans-serif;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  bottom: 25px;
  left: 12px;
}

.run:hover {
  background-color: rgb(40, 139, 0);
}

.run:active {
  background-color: rgb(40, 139, 0);
}

.stop:hover {
  background-color: rgb(187, 7, 7);
}

.stop:active {
  background-color: rgb(187, 7, 7);
}

.button__text,
.button__icon {
  font-size: 24px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  height: 100%;
}

.button__text {
  padding: 0 20px 0 10px;
  width: 35px;
}

.button__icon {
  padding: 0 18px 0 12px;
  width: 34px;
  font-size: 5em;
  background: rgba(0, 0, 0, 0.08);
}

/* Text */

.textHeadline {
  font-weight: 1000;
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-family: "Consolas", sans-serif;
}

.text {
  font-size: 18px;
  color: rgb(255, 255, 255);
  font-family: "Poppins-Regular", sans-serif;
}

/* Social Media Icons Container */

.social-profiles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* text-align: center; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Social Media Icons */

.icons {
  color: white;
  margin-top: 10px;
  padding: 10px;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;
  font-size: 4em;
}

.icons:hover {
  color: #b6b6b6;
}

/* Href */

#link {
  color: #aaa;
}

JS

// Ein Großteil des Scripts habe ich von: https://www.w3schools.com/howto/howto_js_tabs.asp

function onLoadFunctions(){
    document.getElementById("codeBtn").classList.add('focused');
    document.getElementsByClassName("run")[0].addEventListener("click", function (){
        openTab("Console")
    })
    document.getElementsByClassName("stop")[0].addEventListener("click", function (){
        openTab("Code")
    })
    document.getElementById("codeBtn").addEventListener("click", function (){
        openTab("Code")
    })
    document.getElementById("consoleBtn").addEventListener("click", function (){
        openTab("Console")
    })
}
window.onload = onLoadFunctions;

function openTab(tabName) {
    event.preventDefault();

    const codeBtn = document.getElementById("codeBtn");
    const consoleBtn = document.getElementById("consoleBtn");
    const tabContent = document.getElementsByClassName("tabcontent");
    const tabLinks = document.getElementsByClassName("tablinks");

    // Reset all tabs and buttons
    codeBtn.classList.remove('focused');
    codeBtn.offsetWidth;
    consoleBtn.classList.remove('focused');
    consoleBtn.offsetWidth;

    for (let i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    for (let i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }

    // Show the selected tab and add "active" class to the button
    document.getElementById(tabName).style.display = "block";
    let button;
    if (tabName === "Code") {
        button = codeBtn;
    } else {
        button = consoleBtn;
    }
    button.classList.add('focused');
    void button.offsetWidth;
}

HTML

<!DOCTYPE html>

<html lang="de">

<head>
    <meta charset="UTF-8"/>
    <title>Gabriel | Homepage</title>
    <link rel="icon" href="assets/logo-github.svg">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
    <script src="script.js"></script>
</head>

<body>

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

    <div class="flex-container">

        <div class="wrapper">

            <!--Ueberschrift-->

            <h1 id="header">Gabriel | Portfolio</h1>
            <p id="subtitle">Mein Portfolio in einem Code/Console-Style</p>

            <!--Ueberschrift Ende-->

            <!--Container Start; Tab Buttons-->

            <div class="container">

                <div class="tab">
                    <button id="codeBtn" class="tablinks">Code</button>
                    <button id="consoleBtn" class="tablinks">Console</button>
                </div>

                <!--Tab Buttons Ende-->

                <!--Java Code und 'Run Code' Button-->

                <div id="Code" class="tabcontent" style="display: block;">
                    <pre><code class="java">public class Main{
    
public static void main(String[] args) {
    
    Person gabriel = new Person();
    System.out.println(gabriel.toString());

    // TODO: Implement spaghetti code method 🍝
    
    }
}
                    </code><br>&nbsp;</pre>
                    <button type="button" class="button run">
                        <span class="button__text">Run</span>
                        <span class="button__icon">
                            <ion-icon name="caret-forward-outline"></ion-icon>
                        </span>
                    </button>
                </div>

                <!--Java Code und 'Run Code' Button Ende-->

                <!--Konsole Output-->

                <div id="Console" class="tabcontent console">
                    <p>
                        <span class="textHeadline">📌About Me</span>
                        <br><span class="text">
                            Ich bin Java Backend Entwickler, möchte mich in Zukunft jedoch vor allem auf
                            C++ und Rust konzentrieren.
                        </span>
                    </p>
                    <br>
                    <p>
                        <span class="textHeadline">📌Projekte</span>
                        <span class="text">
                            <br>Alle meine Projekte sind auf meinem
                            <a id="link" href="https://github.com/github-gabriel" target="blank">GitHub</a>
                            auffindbar.
                        </span>
                    </p>
                    <button type="button" class="button stop">
                        <span class="button__text">Stop</span>
                        <span class="button__icon">
                          <ion-icon name="stop"></ion-icon>
                        </span>
                    </button>
                </div>
            </div>

            <!--Konsole Output Ende-->

            <!--Social Media Links-->

            <div class="social-profiles">
                <a class="icons" href="https://github.com/github-gabriel" target="blank">
                    <span title="GitHub">
                        <ion-icon name="logo-github" style="pointer-events:none"></ion-icon>
                    </span>
                </a>
                <!--https://mail.google.com/mail/u/0/?fs=1&[email protected]&tf=cm-->
                <a class="icons" href="mailto:[email protected]" target="blank">
                    <span title="E-Mail">
                        <ion-icon name="mail-outline" style="pointer-events:none"></ion-icon>
                    </span>
                </a>
            </div>

            <!--Social Media Links Ende-->

        </div>

    </div>

</body>

</html>

问题截图如下：

如您所见，一个类附加了“焦点”类，而另一个类没有，但它们仍然都有背景颜色，即使只有具有“焦点”类的按钮应该有背景颜色。

确切的预期行为

我希望所有浏览器的按钮都像这样（这是基于 chromium 的 chrome 的屏幕截图）

如您所见，按钮的背景颜色与顶部栏相同

我尝试过的事情

我尝试过将供应商前缀与 Autoprefixer CSS 一起使用

void button.offsetWidth;

在我的脚本中，在班级更改后重新绘制，但没有任何效果。这种行为对我来说似乎很奇怪，也许是 Safari 中的一个错误？

这里是测试网站：https://dev.gabriel-haberlach.de/

这是网站的存储库：https://github.com/github-gabriel/dev-portfolio/tree/master

javascript html css web safari
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.