Question

我有3个元素应该在页面加载时由jQuery集中。目前，桌面和移动设备上只有2个元素由 Safari 正确居中。 #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)});
}

Answer 1

似乎是一个css calc()问题，请尝试仅为left: 50%元素设置#pulse_ball。 Here是分叉工作。

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

1 个答案: