gpt4 book ai didi

javascript - 固定元素在 Safari 上没有被 jquery 居中

转载 作者:太空宇宙 更新时间:2023-11-04 10:50:02 24 4
gpt4 key购买 nike

我有 3 个元素应该在页面加载时由 jQuery 居中。目前,Safari 在桌面和移动设备上只有 2 个元素正确居中。 #pulse_ball 是未正确定位的元素;由于某种原因,它的 left 样式为 -0.5px。然而,调整大小后,所有 3 个元素都正确居中。此外(在 iPhone 上)在纵向模式下,元素在滚动后正确居中,但在横向模式下则不然。

jsFiddle example

#pulse_ball 的 CSS:

#pulse_ball {
display: block;
position: fixed;
left: calc(50% - 27px);
z-index: 25;
top: 48%;
}

#center_line 的 CSS:

#center_line {
width: 3px;
background: #dbdbdb;
margin: 0 auto;
position: fixed;
z-index: 0;
}

#arrow_down 的 CSS:

#arrow_down {
display: block;
width: 64px;
position: fixed;
bottom: 10%;
left: calc(50% - 32px);
}

JS代码:

centerItems();

$(window).resize(function() {
centerItems();
});

function centerItems() {
$("#center_line").height($("body").height());
$("#center_line").offset({left: ($("body").width() / 2) - 1});
$("#pulse_ball").offset({left: ($("body").width() / 2) - ($("#pulse_ball").width() / 2)});
$("#arrow_down").offset({left: ($("body").width() / 2) - ($("#arrow_down").width() / 2)});
}

最佳答案

似乎是 css calc() 问题,请尝试为 #pulse_ball 元素仅设置 left: 50%Here fork 在工作吗?

关于javascript - 固定元素在 Safari 上没有被 jquery 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35062897/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com