我在 HTML 网站中的导航按钮在 Chrome 和 Firefox 中呈现,但在 Safari 中不呈现?
My navigation buttons in HTML website renders in Chrome and Firefox but not Safari?
我的网站导航栏在 Chrome 和 Firefox 中呈现,但在 Safari 中,它根本不呈现。点击仍然有效,但我看不到按钮。
看这张图:
左边是 Firefox,右边是 Safari。
这是导航栏的 HTML 代码:
<nav class="topbar">
<div class="nav_graphics">
<a href="https://play.google.com/store/apps/dev?id=4853083882678511028" target="_blank">
<img class="toxic_flame_icon" src="/images/toxicflame427_icon.png" alt="ToxicFlame427 Icon"/>
</a>
<h1 class="title_header">ToxicFlame427</h1>
</div>
<div class="nav_buttons">
<!--Link the different pages to the main site-->
<a href="/index.html">
<button>
<h3>Home</h3>
</button>
</a>
<a href="/pages/my_creations.html">
<button>
<h3>My Creations</h3>
</button>
</a>
<a href="/pages/about.html">
<button>
<h3>About</h3>
</button>
</a>
<a href="/pages/bug_report.html" class="report_bug_button">
<button>
<h3>Report A Bug</h3>
</button>
</a>
</div>
</nav>
这里也是 CSS:
@font-face {
font-family: "ArcadeClassic";
src: url("/font/ArcadeClassic.woff");
}
.topbar{
padding: 10px;
align-content: flex-start;
width: 100%;
height: wrap;
background-color: black;
}
.nav_graphics{
display: flex;
}
.nav_buttons{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.title_header{
font-family: "ArcadeClassic";
font-size: 2.0em;
vertical-align: top;
display: inline-block;
color: teal;
margin-left: 20px;
margin-right: 20px;
}
.toxic_flame_icon{
display: inline-block;
height: 100px;
transition: 1s;
}
.toxic_flame_icon:hover{
transform: rotate(180deg);
}
.topbar button{
font-size: 0.9em;
transition: 0.25s;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
position: relative;
bottom: 15px;
border-radius: 5px;
border-color: transparent;
color: red;
height: 15%;
width: 130px;
background-color: transparent;
font-weight: bold;
margin-top: 15px;
}
@media only screen and (max-width:600px){
.topbar button{
font-size: 0.8em;
}
.title_header{
font-size: 1.7em;
}
}
.topbar button:hover{
color: turquoise;
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-o-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-moz-transform: translateY(-5px);
}
/*Make sure that the little blue lines cant be seen*/
.topbar a{
color: transparent;
}
会不会和字体有关?或者其他我没听懂的东西?
如果有人需要查看更多代码,该站点在线 https://toxicflame427.xyz。
发生这种情况是因为您的 button
元素具有 15%
高度,并且 Safari 和其他浏览器处理按钮内溢出的方式不同。
只需取消高度限制(或将其设置得更大)即可。
另外,附注:在这两种浏览器中,按钮都没有覆盖其内容,这不是一个好习惯。另外,没有指定高度的 a
元素内的百分比高度也不好。
我的网站导航栏在 Chrome 和 Firefox 中呈现,但在 Safari 中,它根本不呈现。点击仍然有效,但我看不到按钮。
看这张图:
这是导航栏的 HTML 代码:
<nav class="topbar">
<div class="nav_graphics">
<a href="https://play.google.com/store/apps/dev?id=4853083882678511028" target="_blank">
<img class="toxic_flame_icon" src="/images/toxicflame427_icon.png" alt="ToxicFlame427 Icon"/>
</a>
<h1 class="title_header">ToxicFlame427</h1>
</div>
<div class="nav_buttons">
<!--Link the different pages to the main site-->
<a href="/index.html">
<button>
<h3>Home</h3>
</button>
</a>
<a href="/pages/my_creations.html">
<button>
<h3>My Creations</h3>
</button>
</a>
<a href="/pages/about.html">
<button>
<h3>About</h3>
</button>
</a>
<a href="/pages/bug_report.html" class="report_bug_button">
<button>
<h3>Report A Bug</h3>
</button>
</a>
</div>
</nav>
这里也是 CSS:
@font-face {
font-family: "ArcadeClassic";
src: url("/font/ArcadeClassic.woff");
}
.topbar{
padding: 10px;
align-content: flex-start;
width: 100%;
height: wrap;
background-color: black;
}
.nav_graphics{
display: flex;
}
.nav_buttons{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.title_header{
font-family: "ArcadeClassic";
font-size: 2.0em;
vertical-align: top;
display: inline-block;
color: teal;
margin-left: 20px;
margin-right: 20px;
}
.toxic_flame_icon{
display: inline-block;
height: 100px;
transition: 1s;
}
.toxic_flame_icon:hover{
transform: rotate(180deg);
}
.topbar button{
font-size: 0.9em;
transition: 0.25s;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
position: relative;
bottom: 15px;
border-radius: 5px;
border-color: transparent;
color: red;
height: 15%;
width: 130px;
background-color: transparent;
font-weight: bold;
margin-top: 15px;
}
@media only screen and (max-width:600px){
.topbar button{
font-size: 0.8em;
}
.title_header{
font-size: 1.7em;
}
}
.topbar button:hover{
color: turquoise;
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-o-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-moz-transform: translateY(-5px);
}
/*Make sure that the little blue lines cant be seen*/
.topbar a{
color: transparent;
}
会不会和字体有关?或者其他我没听懂的东西?
如果有人需要查看更多代码,该站点在线 https://toxicflame427.xyz。
发生这种情况是因为您的 button
元素具有 15%
高度,并且 Safari 和其他浏览器处理按钮内溢出的方式不同。
只需取消高度限制(或将其设置得更大)即可。
另外,附注:在这两种浏览器中,按钮都没有覆盖其内容,这不是一个好习惯。另外,没有指定高度的 a
元素内的百分比高度也不好。