html Safari for Desktop忽略CSS

ui7jx7zq  于 2024-01-04  发布在  其他
关注(0)|答案(1)|浏览(91)

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

CSS

  1. @media (max-width: 1000px) {
  2.   .container {
  3.     width: 90%;
  4.   }
  5. }
  7. @media (max-height: 600px) {
  8.   .wrapper {
  9.     height: 70%;
  10.   }
  11. }
  13. p {
  14.   margin: 0;
  15.   padding: 0;
  16. }
  18. body {
  19.   width: 100vw;
  20.   height: 100vh;
  21.   margin: 0;
  22.   padding: 0;
  23.   background-color: #121212;
  24. }
  26. /* Portfolio Header */
  28. #header {
  29.   display: -webkit-box;
  30.   display: -ms-flexbox;
  31.   display: flex;
  32.   -webkit-box-pack: center;
  33.   -ms-flex-pack: center;
  34.   justify-content: center;
  35.   font-family: "Poppins-ExtraBold", sans-serif;
  36.   font-weight: 700;
  37.   font-size: 60px;
  38.   margin-bottom: 10px;
  39.   background-image: -o-linear-gradient(
  40.           45deg,
  41.           #4158d0 -10%,
  42.           #c850c0 40%,
  43.           #ffb116 100%
  44.   );
  45.   background-image: linear-gradient(
  46.           45deg,
  47.           #4158d0 -10%,
  48.           #c850c0 40%,
  49.           #ffb116 100%
  50.   );
  51.   -webkit-background-clip: text;
  52.   background-clip: text;
  53.   color: transparent;
  54.   text-align: center;
  55. }
  57. #subtitle {
  58.   display: -webkit-box;
  59.   display: -ms-flexbox;
  60.   display: flex;
  61.   -webkit-box-pack: center;
  62.   -ms-flex-pack: center;
  63.   justify-content: center;
  64.   font-family: "Poppins-Bold", sans-serif;
  65.   -ms-grid-row-align: center;
  66.   align-self: center;
  67.   font-size: 30px;
  68.   margin-bottom: 75px;
  69.   color: white;
  70. }
  72. /* Container */
  74. .flex-container {
  75.   display: -webkit-box;
  76.   display: -ms-flexbox;
  77.   display: flex;
  78.   -webkit-box-pack: center;
  79.   -ms-flex-pack: center;
  80.   justify-content: center;
  81.   -webkit-box-align: center;
  82.   -ms-flex-align: center;
  83.   align-items: center;
  84.   height: 100%;
  85. }
  87. .container {
  88.   background-color: #282c34;
  89.   border-radius: 25px;
  90.   text-align: center;
  91.   width: 750px;
  92. }
  94. /* Tabs */
  96. /* Style the tab */
  97. .tab {
  98.   overflow: hidden;
  99.   border: 3px solid #1c1b1b;
  100.   border-top-left-radius: 25px;
  101.   border-top-right-radius: 25px;
  102.   background-color: #f1f1f1;
  103. }
  105. /* Style the buttons that are used to open the tab content */
  106. .tab button {
  107.   font-weight: 700;
  108.   font-size: 26px;
  109.   font-family: Consolas, monospace;
  110.   float: left;
  111.   border: none;
  112.   outline: none;
  113.   cursor: pointer;
  114.   padding: 14px 18px;
  115.   -webkit-transition: 0.3s;
  116.   -o-transition: 0.3s;
  117.   transition: 0.3s;
  118.   color: black;
  119. }
  121. /* reset pre tag */
  122. pre {
  123.   margin: 0;
  124.   padding: 0;
  125. }
  127. .tab button:focus {
  128.   background-color: rgb(197, 197, 197);
  129. }
  131. /* Change background color of buttons on hover */
  132. .tab button:hover {
  133.   background-color: rgb(197, 197, 197);
  134. }
  136. /* Create an active/current tablink class */
  137. .tab button.active {
  138.   background-color: rgb(197, 197, 197);
  139. }
  141. /* Style the tab content */
  142. .tabcontent {
  143.   display: none;
  144.   height: 396px;
  145.   font-size: 22px;
  146.   border: 3px solid #121212;
  147.   border-bottom-right-radius: 25px;
  148.   border-bottom-left-radius: 25px;
  149.   font-family: Consolas, monospace;
  150.   text-align: left;
  151.   padding: 6px 12px;
  152.   border-top: none;
  153. }
  155. .console {
  156.   padding: 10px 22px 2px 22px;
  157. }
  159. #Console,
  160. #Code {
  161.   position: relative;
  162. }
  164. /* adjusting stack overflow style */
  165. #Code pre code.hljs {
  166.   padding: 1em 1em 0 1em;
  167. }
  169. /* Gets added whenever a tab button is pressed */
  171. .focused {
  172.   background-color: rgb(197, 197, 197);
  173. }
  175. /* Run Code Button */
  177. .run {
  178.   background-color: rgb(44, 156, 0);
  179. }
  181. .stop {
  182.   background-color: rgb(204, 2, 2);
  183. }
  185. .stop .button__icon {
  186.   width: 28px;
  187. }
  189. .button {
  190.   /* position: absolute; */
  191.   /* bottom: 8%; */
  192.   display: -ms-inline-flexbox;
  193.   display: inline-flex;
  194.   width: 130px;
  195.   height: 40px;
  196.   margin-left: 1.5%;
  197.   border: none;
  198.   outline: none;
  199.   border-radius: 5px;
  200.   overflow: hidden;
  201.   font-family: "Arial", sans-serif;
  202.   font-size: 24px;
  203.   font-weight: 500;
  204.   cursor: pointer;
  205.   position: absolute;
  206.   bottom: 25px;
  207.   left: 12px;
  208. }
  210. .run:hover {
  211.   background-color: rgb(40, 139, 0);
  212. }
  214. .run:active {
  215.   background-color: rgb(40, 139, 0);
  216. }
  218. .stop:hover {
  219.   background-color: rgb(187, 7, 7);
  220. }
  222. .stop:active {
  223.   background-color: rgb(187, 7, 7);
  224. }
  226. .button__text,
  227. .button__icon {
  228.   font-size: 24px;
  229.   display: -ms-inline-flexbox;
  230.   display: inline-flex;
  231.   -webkit-box-align: center;
  232.   -ms-flex-align: center;
  233.   align-items: center;
  234.   color: #fff;
  235.   height: 100%;
  236. }
  238. .button__text {
  239.   padding: 0 20px 0 10px;
  240.   width: 35px;
  241. }
  243. .button__icon {
  244.   padding: 0 18px 0 12px;
  245.   width: 34px;
  246.   font-size: 5em;
  247.   background: rgba(0, 0, 0, 0.08);
  248. }
  250. /* Text */
  252. .textHeadline {
  253.   font-weight: 1000;
  254.   font-size: 24px;
  255.   color: rgb(255, 255, 255);
  256.   font-family: "Consolas", sans-serif;
  257. }
  259. .text {
  260.   font-size: 18px;
  261.   color: rgb(255, 255, 255);
  262.   font-family: "Poppins-Regular", sans-serif;
  263. }
  265. /* Social Media Icons Container */
  267. .social-profiles {
  268.   display: -webkit-box;
  269.   display: -ms-flexbox;
  270.   display: flex;
  271.   -webkit-box-align: center;
  272.   -ms-flex-align: center;
  273.   align-items: center;
  274.   /* text-align: center; */
  275.   -webkit-box-pack: center;
  276.   -ms-flex-pack: center;
  277.   justify-content: center;
  278. }
  280. /* Social Media Icons */
  282. .icons {
  283.   color: white;
  284.   margin-top: 10px;
  285.   padding: 10px;
  286.   -webkit-transition: color 0.2s;
  287.   -o-transition: color 0.2s;
  288.   transition: color 0.2s;
  289.   text-decoration: none;
  290.   font-size: 4em;
  291. }
  293. .icons:hover {
  294.   color: #b6b6b6;
  295. }
  297. /* Href */
  299. #link {
  300.   color: #aaa;
  301. }

字符串

JS

  1. // Ein Großteil des Scripts habe ich von: https://www.w3schools.com/howto/howto_js_tabs.asp
  3. function onLoadFunctions(){
  4.     document.getElementById("codeBtn").classList.add('focused');
  5.     document.getElementsByClassName("run")[0].addEventListener("click", function (){
  6.         openTab("Console")
  7.     })
  8.     document.getElementsByClassName("stop")[0].addEventListener("click", function (){
  9.         openTab("Code")
  10.     })
  11.     document.getElementById("codeBtn").addEventListener("click", function (){
  12.         openTab("Code")
  13.     })
  14.     document.getElementById("consoleBtn").addEventListener("click", function (){
  15.         openTab("Console")
  16.     })
  17. }
  18. window.onload = onLoadFunctions;
  20. function openTab(tabName) {
  21.     event.preventDefault();
  23.     const codeBtn = document.getElementById("codeBtn");
  24.     const consoleBtn = document.getElementById("consoleBtn");
  25.     const tabContent = document.getElementsByClassName("tabcontent");
  26.     const tabLinks = document.getElementsByClassName("tablinks");
  28.     // Reset all tabs and buttons
  29.     codeBtn.classList.remove('focused');
  30.     codeBtn.offsetWidth;
  31.     consoleBtn.classList.remove('focused');
  32.     consoleBtn.offsetWidth;
  34.     for (let i = 0; i < tabContent.length; i++) {
  35.         tabContent[i].style.display = "none";
  36.     }
  38.     for (let i = 0; i < tabLinks.length; i++) {
  39.         tabLinks[i].className = tabLinks[i].className.replace(" active", "");
  40.     }
  42.     // Show the selected tab and add "active" class to the button
  43.     document.getElementById(tabName).style.display = "block";
  44.     let button;
  45.     if (tabName === "Code") {
  46.         button = codeBtn;
  47.     } else {
  48.         button = consoleBtn;
  49.     }
  50.     button.classList.add('focused');
  51.     void button.offsetWidth;
  52. }

型

HTML格式

  1. <!DOCTYPE html>
  3. <html lang="de">
  5. <head>
  6.     <meta charset="UTF-8"/>
  7.     <title>Gabriel | Homepage</title>
  8.     <link rel="icon" href="assets/logo-github.svg">
  9.     <link rel="stylesheet" href="style.css">
  10.     <link rel="stylesheet"
  11.         href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
  12.     <script src="script.js"></script>
  13. </head>
  15. <body>
  17.     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
  18.     <script>hljs.highlightAll();</script>
  19.     <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
  20.     <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
  22.     <div class="flex-container">
  24.         <div class="wrapper">
  26.             <!--Ueberschrift-->
  28.             <h1 id="header">Gabriel | Portfolio</h1>
  29.             <p id="subtitle">Mein Portfolio in einem Code/Console-Style</p>
  31.             <!--Ueberschrift Ende-->
  33.             <!--Container Start; Tab Buttons-->
  35.             <div class="container">
  37.                 <div class="tab">
  38.                     <button id="codeBtn" class="tablinks">Code</button>
  39.                     <button id="consoleBtn" class="tablinks">Console</button>
  40.                 </div>
  42.                 <!--Tab Buttons Ende-->
  44.                 <!--Java Code und 'Run Code' Button-->
  46.                 <div id="Code" class="tabcontent" style="display: block;">
  47.                     <pre><code class="java">public class Main{
  48.     
  49. public static void main(String[] args) {
  50.     
  51.     Person gabriel = new Person();
  52.     System.out.println(gabriel.toString());
  54.     // TODO: Implement spaghetti code method 🍝
  55.     
  56.     }
  57. }
  58.                     </code><br>&nbsp;</pre>
  59.                     <button type="button" class="button run">
  60.                         <span class="button__text">Run</span>
  61.                         <span class="button__icon">
  62.                             <ion-icon name="caret-forward-outline"></ion-icon>
  63.                         </span>
  64.                     </button>
  65.                 </div>
  67.                 <!--Java Code und 'Run Code' Button Ende-->
  69.                 <!--Konsole Output-->
  71.                 <div id="Console" class="tabcontent console">
  72.                     <p>
  73.                         <span class="textHeadline">📌About Me</span>
  74.                         <br><span class="text">
  75.                             Ich bin Java Backend Entwickler, möchte mich in Zukunft jedoch vor allem auf
  76.                             C++ und Rust konzentrieren.
  77.                         </span>
  78.                     </p>
  79.                     <br>
  80.                     <p>
  81.                         <span class="textHeadline">📌Projekte</span>
  82.                         <span class="text">
  83.                             <br>Alle meine Projekte sind auf meinem
  84.                             <a id="link" href="https://github.com/github-gabriel" target="blank">GitHub</a>
  85.                             auffindbar.
  86.                         </span>
  87.                     </p>
  88.                     <button type="button" class="button stop">
  89.                         <span class="button__text">Stop</span>
  90.                         <span class="button__icon">
  91.                           <ion-icon name="stop"></ion-icon>
  92.                         </span>
  93.                     </button>
  94.                 </div>
  95.             </div>
  97.             <!--Konsole Output Ende-->
  99.             <!--Social Media Links-->
  101.             <div class="social-profiles">
  102.                 <a class="icons" href="https://github.com/github-gabriel" target="blank">
  103.                     <span title="GitHub">
  104.                         <ion-icon name="logo-github" style="pointer-events:none"></ion-icon>
  105.                     </span>
  106.                 </a>
  107.                 <!--https://mail.google.com/mail/u/0/?fs=1&[email protected]&tf=cm-->
  108.                 <a class="icons" href="mailto:[email protected]" target="blank">
  109.                     <span title="E-Mail">
  110.                         <ion-icon name="mail-outline" style="pointer-events:none"></ion-icon>
  111.                     </span>
  112.                 </a>
  113.             </div>
  115.             <!--Social Media Links Ende-->
  117.         </div>
  119.     </div>
  121. </body>
  123. </html>

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

准确的预期行为

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


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

我所尝试的

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

  1. 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）举报  2024-01-04
我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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