html Safari for Desktop忽略CSS

ui7jx7zq  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(83)

我正在尝试修复一些CSS/（HTML/JS？）我的Safari网站上的错误，特别是桌面版。由于我自己没有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>

型
下面是问题的屏幕截图：x1c 0d1x
正如您所看到的，一个类附加了“focused”类，而另一个类没有，但它们仍然都有背景颜色，即使只有带有“focused”类的按钮应该有背景颜色。

准确的预期行为

我希望所有浏览器的按钮都是这样的（这是Chrome的截图，它是基于chromium的）


的
正如你所看到的按钮有相同的背景颜色作为顶部栏

我所尝试的

我尝试过使用Autoprefixer CSS的供应商前缀，

void button.offsetWidth;

型
在我的脚本中，在类更改后重新绘制，但没有任何效果。这种行为对我来说似乎很奇怪，也许是Safari中的一个bug？
以下是测试网站：https://dev.gabriel-haberlach.de/
这是网站的repo：https://github.com/github-gabriel/dev-portfolio/tree/master

Html

1条答案

按热度按时间
62lalag4

62lalag41#

在Safari上默认为user agent stylesheet。尝试包括CSS重置，如meyerweb CSS reset或normalize.css，以删除这些默认值。Google“CSS重置与正常化”查看差异。
在这里查看答案：https://stackoverflow.com/a/12582723/4053359


的数据

赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com