在 Safari 上定位元素关闭

Question

我有一个带箭头的按钮，当鼠标悬停在上面时应该会出现并向下移动。在 Chrome 和 Firefox 上它工作正常，但是当我在 Safari 上打开它时，箭头太低 - 它们的位置不正确。我听说有人指定“top”和 :left”，但这似乎对我不起作用。我不知道这是为什么，但似乎是由于位置：相对。
代码：

<a class="details" href="#scroll"> <span class="details__border--bottom">More Details</span>
</a>
    
    <div class="top-portion__arrows">
        <span class="top-portion__arrows--hide"></span> 
        <span class="top-portion__arrows--hide"></span>
        <span class="top-portion__arrows--hide"></span>
    </div>



   a.details {
    border: 2.5px solid white;
    padding: 8px 62px;
    padding-top: 11px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.75rem;
    background-color: rgba(214, 128, 0, 0.45);
    color: white;
    cursor: pointer;
    position: relative;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 50%;
    top: 5%;
    z-index: 1;
    display: inline-block;  
}


a.details:hover,
a.details:focus {
    background-color: rgba(231, 147, 21, 0.25);
    -webkit-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    transition: .5s ease-in;
}
a.details:hover,
a.details:focus {
    border: 3.5px solid white;
    -webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s;
}
a.details:active {
    background-color: rgba(247, 195, 100, 0.75);
    -webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s;
}

.details__border--bottom {
    display: inline-block;
    padding: 2px 0px 4px;
    margin: 0px 8px 0px;
    position: relative;
}


 .details__border--bottom:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    border-bottom: 2.5px solid white;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.25s ease-in-out;
    -webkit-transition: -webkit-transform 0.45s ease-in-out;
    transition: -webkit-transform 0.45s ease-in-out;
    -o-transition: transform 0.45s ease-in-out;
    transition: transform 0.45s ease-in-out;
    transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
}

a:hover .details__border--bottom:before,
a:focus  .details__border--bottom:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

.top-portion__arrows {
    position: relative;
    width: 0%;
    top: 10%;
    left: 51.5%;
    
}

.top-portion__arrows .top-portion__arrows--hide {
    opacity: 0;
    display: block;
    width: 120px;
    height: 120px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    margin: -85px;
}

a.details:hover + .top-portion__arrows .top-portion__arrows--hide,
a.details:focus + .top-portion__arrows .top-portion__arrows--hide {
    opacity: 1;
    -webkit-animation: animate .65s ease;
            animation: animate .65s ease;
}

.top-portion__arrows .top-portion__arrows--hide:hover .details__border--full,
.top-portion__arrows .top-portion__arrows--hide:focus .details__border--full {
    border: 2.5px solid white;
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

@-webkit-keyframes animate {
    0%{
        opacity: 0;
        -webkit-transform: rotate(45deg) translate(-10px,-10px);
                transform: rotate(45deg) translate(-10px,-10px);
    }
    50%{
        opacity: .5;
    }
    100%{
        opacity: 1;
        -webkit-transform: rotate(45deg) translate(0px,0px);
                transform: rotate(45deg) translate(0px,0px);
    }
}

@keyframes animate {
    0%{
        opacity: 0;
        -webkit-transform: rotate(45deg) translate(-10px,-10px);
                transform: rotate(45deg) translate(-10px,-10px);
    }
    50%{
        opacity: .5;
    }
    100%{
        opacity: 1;
        -webkit-transform: rotate(45deg) translate(0px,0px);
                transform: rotate(45deg) translate(0px,0px);
    }
}

Answer 1

您可以检测用户是否正在使用某些 javascript 在 safari 上浏览，然后如果他们在 safari 上浏览，则通过更改 margin-left 和 margin-top 以特定方式设置按钮样式。下面是检测用户是否在 safari 中的代码：

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
    alert("chrome") // Chrome
  } else {
    alert("safari") // Safari
  }
}

编辑：您的完整代码：

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
  } else {
document.getElementById("btn1").style.marginTop = "80%";  }
}

在 Safari 上定位元素关闭

Positioned element is off when on Safari`

html

css

safari

css-position