由于某些原因，我的按鈕的底部邊界在懸停時消失了，我不知道為什么。它在本地運行良好，但當我檢查我的網站時，它就消失了。
這是我的代碼https://codepen.io/ecanada138/pen/ExXRXoW，這是我 repo 上的確切代碼。
這里是網站https://8thvisionmedia.netlify.app/，你可以看到這個問題，但它沒有顯示在codepen或本地
。<! DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0" />
<!-- Bootstrap CSS -->
<link。
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span>
rel="styleheet"
integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x"/span>
crossorigin="anonymous"。
/>
<! -- Font Awesome -->
<script
src="https://kit.fontawesome.com/5826f42d14.js"/span>
crossorigin="anonymous"。
></script>>
<! -- Fonts -->
<link rel="preconnect"/span> href="https://fonts. googleapis.com" />
<link rel="preconnect"/span> href="https://fonts. gstatic.com" crossorigin />。
<link。
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400& display=swap"
rel="styleheet"
/>
<! -- CSS SHEETS -->
<link rel="styleheet" href="css/index. css" />
<title>8th Vision Media | 房地產視頻和圖片制作</title>
<link
rel="快捷圖示"
type="image/png"
href="./images/8-vision-logo-favicon.ico"。
/>
</head>
<body>
<!--------------------------------------- NAV BAR --------------------------------------------------->
<div class="phone-container">
<nav class="navbar navbar-expand-xxxxxxl phone-nav"/span>>
<div class="container-fluid">/span>
<button
class="navbar-toggler custom-toggler ms-auto"
type="button"
data-bs-toggle="collapse"。
data-bs-target="#navbarNav"
aria-controls="navbarNav"。
aria-expanded="false"/span>
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"/span>> </span>>
</button>
<div
class="collapse navbar-collapse flex-column align-items-end"
id="navbarNav"
>
<ul class="navbar-nav flex-column"/span>>
<! -- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> Home</a>
</li> -->/span>
<li class="nav-item">
<a class="nav-link" href=". /gallery.html">視頻庫</a>/span>
</li>/span>
<li class="nav-item">
<a class="nav-link" href=". /core-values.html">核心價值 </a>
</li>/span>
<li class="nav-item">
<a class="nav-link" href=" 。 /contact.html">Get In Touch</a>
</li>/span>
<! -- <li class="nav-item">
<a class="nav-link" href="./our-people.html">我們的人</a>
</li> -->/span>
<li class="nav-item">
<a>
class="nav-link"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"。
>我們的作業</a
>
</li>
</ul>/span>
</div>/span>
</div>/span>
</nav>
<nav class="navbar navbar-expand-lg desktop-nav" >
<div class="container-fluid">/span>
<div
class="collapse navbar-collapse desktop-nav-container"
id="navbarNavAltMarkup"
>
<div class="navbar-nav">/span>
<a>
class="nav-link nav-link-desktop"。
aria-current="page"。
href="./contact.html"。
>取得聯系</a
>
<a class="nav-link nav-link-desktop" href=" 。 /core-values.html"
>核心價值
</a>核心價值
<a class="nav-link nav-link-desktop" href=" 。 /gallery.html"
>視頻庫</a
>
<a
style="border-right: none; text-decoration: none"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"。
>我們的作業</a
>
</div>
</div>/span>
</div>/span>
</nav>
<div class="vimeo-wrapper">
<iframe。
src="https://player.vimeo.com/video/570788340?background=1&autoplay=1&loop=1&byline=0&title0"
frameborder="0"/span>
webkitallowfullscreen>
mozallowfullscreen
allowfullscreen allowfullscreen
></iframe>>
<div>
<div class="container-fluid home-container">
<div class="row home-row">/span>
<div class="col home-col"/span>>
<! -- <p class="home-text">
我們為品牌創造強大的視覺內容，幫助推動
銷售、增長和參與。
</p> -->/span>
<button。
onClick="window.open('https://www.8thvisionmedia.com/contact');"/span>
class="create-button"。
>
<a
href="./contact.html
"
與我們一起創建
</a>創建與我們的合作。
</button>/span>
</div>
</div>/span>
<! -- <div class="row fa-row text-center">
<div class="col fa-col">
<span>
<a
href="https://www.instagram.com/8thvisionmedia/"
target="_blank"
><i class="myIcon fab fa-instagram fa-2x"
><p class="hide">我們做什么</p></i
></a
></span
><span
><a href="mailto:[email protected]"
><i class="myIcon far fa-envelope fa-2x"
><p class="hide">Take Your Next Step</p></i
></a
>
</span>
</div>
</div> -->/span>
<div class="row row-logo">
<div class="col col-logo"/span>>
<img
class="Vision-media-logo"
src="./images/8th-vision-logo.png"。
/>
</div>
</div>/span>
<div class="row row-copyright">
<div class="col col-copyright">/span>
<a>© 2021年第8視覺媒體</a>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0/ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4"/span>
crossorigin="anonymous"/span>
></script>>
</body>
</html>
@font-face {
font-family: cocogoose-regular;
src: url('./fonts/Cocogoose-Classic-Medium-trial.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
行高：1.5。
}
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0px 10px 0px 10px;
邊框-右：1px固體rgb（255，255，255）。
高度：20px。
}
.vimeo-wrapper {
位置：固定。
頂部。0;
left: 0;
寬度：100%。
高度：100%。
z-index: -1;
/* 指標事件：無； */
溢位：隱藏。
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* 鑒于16:9的長寬比，9/16*100 = 56.25 */
最小高度: 100vh;
min-width: 177.77vh; /* 鑒于16:9的長寬比，16/9*100=177.77 */
position: absolute;
頂部。50%;
left: 50%;
transform: translate(-50%, -50%);
/* Z-index: -1; */
}
.電話-導航 {
顯示：無。
}
.navbar-nav {
display: flex;
flex-direction: column;
margin-top: 1rem;
顏色：rgb(255, 255, 255)。
字體大小：1rem。
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.1rem;
邊界。1px solid rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg xml;charset=utf8,"）。)
}
.navbar-toggler:focus {
box-shadow: none;
}
.desktop-nav-container {
flex-direction: row;
justify-content: center;
}
/* .nav-link-desktop::after{
內容。' |';
} */
@media screen and (max-width: 992px) {
.電話-導航 {
display: block;
}
}
.home-container {
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
顏色：rgb(255, 255, 255)。
}
.首頁-行 {
padding: 0 10rem 0 10rem;
z-index: 1000;
}
.home-text {
text-align: center;
字體大小: 1.2rem;
字母間距。3px;
}
.home-col {
寬度：100%。
}
.col-logo {
position: absolute;
left: 2rem;
底部。1rem;
margin-bottom: 0.5rem;
padding: 0;
}
.row-copyright {
position: absolute;
右邊：2rem;
底部。1rem;
font-family: 'Montserrat', sans-serif;
}
.Vision-media-logo {
寬度: 3rem;
}
a {
color: rgb(255, 255, 255) !important;
字體大小: 14px;
}
.fa {
字體大小: 2rem;
}
ul {
text-align: center;
}
@media screen and (min-width: 1399px) {
.home-row {
padding: 0 20rem 0 20rem;
}
}
@media screen and (min-width: 1800px) {
.home-row {
padding: 0 35rem 0 35rem;
}
}
@media screen and (min-width: 2200px) {
.home-row {
padding: 0 50rem 0 50rem;
}
}
@media screen and (max-width: 767px) {
.navbar-nav {
margin-right: 0;
}
.home-row {
padding: 0 3rem 0 3rem;
}
}
@media screen and (max-width: 575px) {
.home-row {
padding: 0 1rem 0 1rem;
margin-top: -8rem;
}
.home-text {
字體大小: 1rem;
}
.Vision-media-logo {
width: 2rem;
}
.col-logo {
position: absolute;
left: 1rem;
底部。1rem;
}
.row-copyright {
position: absolute;
right: 1rem;
底部。0rem;
font-family: 'Montserrat', sans-serif;
字體大小：12px。
}
}
/* .myIcon {
margin-left: 3rem;
margin-right: 3rem;
}
.hide {
可見性: 隱藏。
字體大小: 1rem;
margin-top: 10px;
不透明度：0。
text-transform: uppercase;
text-align: center;
過渡。0.8s;
}
.myIcon:hover .hide {
可見性：可見。
不透明度: 1;
}
.myIcon {
z-index: 1000;
}
*/
@media screen and (max-width: 576px) {
.vimeo-wrapper {
background-image: url('./images/home-screen-bg.jpg');
背景-位置：中心。
背景尺寸：覆寫。
}
.vimeo-wrapper iframe {
顯示：無。
}
.phone-container {
position: relative;
}
}
@media screen and (max-width: 515px) {
.fa-col {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.desktop-nav-container {
display: none !important;
}
}
.col-copyright {
margin-bottom: 1rem;
}
@media screen and (max-width: 992px) {
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0.5rem 1rem;
border: none;
高度：100%。
字體大小：1rem。
}
}
.創建-按鈕 {
背景顏色: rgba(255, 255, 255, 0);
顏色: rgb(255, 255, 255);
輪廓：0。
邊框。1px solid rgb(255, 255, 255) !important;
邊框-底部。1px solid rgb(255, 255, 255) !important;
font-family: 'cocogoose-regular';
字母間距：2px。
margin: auto;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
過渡。0.5s ease;
}
.創建按鈕 a {
text-decoration: none;
}
.create-button:hover {
背景顏色: rgba(255, 255, 255, 0.3);
/*顏色: rgb(255, 255, 255); */
/* 輪廓線: 0; */
/* 邊界。1px solid rgb(255, 255, 255); *//
/* 字體: 'cocogoose-regular'; */
/*字母間距: 2px; */
/* 寬度: 100%; */
/* padding: 1rem 2rem; */
transform: scale(1.1);
}
uj5u.com熱心網友回復：
移除 transform: scale(1.1)。 它起作用了
uj5u.com熱心網友回復：
它在firefox上運行良好。但我在edge上看到了這個問題。我通過給.home-col類添加padding來解決它。
添加以下內容，它應該可以正常作業：
。.home-col {
padding: 10px;
uj5u.com熱心網友回復：
我不知道具體的原因，但是改變 "scale "的值就可以解決這個問題了：
transform: scale(1.2); for example
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/331818.html
標籤：