时间戳

首页 > 解决方案 > html Button Hitbox 在 Safari（移动设备和 Mac）上移动

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

问题描述

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

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

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

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

在此处输入图像描述

.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;
}

标签： javascripthtmlcsshtmlbutton

解决方案

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

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

在您的情况下，您需要像这样使用-webkik-beforecss元素：

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

并且只使用不稳定的元素

推荐阅读