jQuery CSS樣式僅適用於iOS上的第一個元素

Question

我有一個非常簡單的腳本來確保全幅橫幅圖像始終居中並響應。

<script>

    $(document).ready(function () {
        var conHeight = $(window).width();
        var imgHeight = $(".banner_image img").width();
        var gap = (imgHeight - conHeight) / 2;
        $(".banner_image img").css('left', -gap);
    });


</script>

我有.banner_image類的多個實例，該類.banner_image有一個全角橫幅圖像。

我已經嘗試過有沒有document.ready函數。 它適用於桌面上所有圖像的所有屏幕尺寸，但是在iOS的Safari上，它僅將第一張圖像居中。

我閱讀了一些有關iOS 8中的錯誤的信息，該錯誤只會導致第一個.each()子級正常工作，但是我確保我擁有最新的jQuery，可以修復該錯誤（2.1.4、1.11.3認為）

在iPhone上查看圖像時，如何使所有圖像居中？

CSS：

.banner_image {
    text-align: center;
    position: relative;
    min-height: 500px;
    overflow: hidden;
    display: block;
}
.banner_image img {
    min-height: 100%;
}

.banner_image img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    min-width: 100%;
}

Answer 1

當我將jsFiddle放在一起時，我發現了一個left: 0 !important在層次結構中的其他位置left: 0 !important 。 當我刪除它時，它可以在Safari上運行。