html Button Hitbox 在 Safari（移动设备和 Mac）上移动

Question

我有一个简单的 HTML 按钮。它在 Google Chrome（网络浏览器）上功能齐全，但如果我在 Safari（macOS）和 Safari（iOS）上测试我的网站，按钮的 Hitbox 会错位在按钮上方约 50 像素处。只有当客户端使用 Safari mobil 或 Safari Mac 时，有什么方法可以修复按钮？

如果光标在按钮上。已停用

如果光标稍微在按钮上方。已激活

.swiper-container .text-container{
	padding-top: 17%;
	width: 40%;
	display: inline-block;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover{
	background: #798E9D;
	border-color: #798E9D;
	color: white;	
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover {
background: #798E9D;
border-color: #798E9D;
color: white;
}
.swiper-container .btn {
	margin-top: 40px;
	display: inline-block;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white), body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white), body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white), .dark-colors .button:not(.grey):not(.alt):not(.white), body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white), body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white), .dark-colors .submit, body.dark-theme:not(.logo-dark) .submit, body.light-theme.logo-light:not(.menu-open) .submit {
border-color: #fff;
color: #fff;
}
.swiper-container .btn {
margin-top: 40px;
display: inline-block;
}
.swiper-container .btn {
margin-top: 40px;
}
.btn, .button:not(.selectric-button), .submit {
display: inline-block;
vertical-align: middle;
border: 2px solid #151515;
background: transparent;
text-transform: uppercase;
font-size: 12px;
line-height: 1;
font-weight: 600;
color: #151515;
line-height: 34px;
padding: 0 35px;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover{
	background: #798E9D;
	border-color: #798E9D;
	color: white;	
}
.swiper-container .text-container{
	padding-top: 17%;
	width: 40%;
	display: inline-block;
}
@media only screen and (min-width: 800px){
.swiper-container .text-container{
	padding-top: 6%;
	width: 70%;
	display: inline-block;
	}
}
@media only screen and (max-width: 800px){
.swiper-container .text-container{
	padding-top: 13%;
	width: 70%;
	display: inline-block;
	}
}
@media only screen and (max-width: 600px){
	h1{
	font-size: 20px;
	text-transform: none;
	}
.swiper-container .text-container{
	padding-top: 38%;
	width: 88%;
	display: inline-block;
	}
}

<div class="text-container">
    		 <h1>"This is the headline."</h1>
    		 <p>This is the autor </p>
    	<a href="https://google.com" class="btn">Button Deactivated</a>
</div>

    .swiper-container .btn {
    margin-top: 40px;
}
.btn, .button:not(.selectric-button), .submit {
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #151515;
    background: transparent;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: #151515;
    line-height: 34px;
    padding: 0 35px;
}

Answer 1

尝试使用特定前缀浏览器：

Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

在您的情况下，您需要在css 元素之前使用-webkik-，如下所示：

.btn, .button:not(.selectric-button), .submit{
    -webkik-text-transform: uppercase;
}

并且只对不稳定元素执行此操作