javascript - 带有图像 slider 的 Div 仅在 Safari 中不继承高度

Question

我正在为单页网上商店使用 Flickity slider 。我已将高度设置为桌面屏幕上父 div 的 100%。这在 Chrome 上运行良好，但不适用于 Safari。

LINK TO PAGE

HTML:

<div class="product__container">
        <div class="product__image--container">
            <div class="main-carousel">
                <div class="carousel-cell img--two"></div>
                <div class="carousel-cell img--four"></div>
                <div class="carousel-cell img--five"></div>
                <div class="carousel-cell img--one"></div>
            </div>
        </div>
        <div class="product__description--container">

            <div class="product__description--aligner">

                <h1 class="product__title" style="margin-bottom: 0px; margin-top: 0px;"><strong>MYSTERY BOX</strong></h1>
                <p class="product__price">$25</p>
                <p><strong>The stuff:</strong> we spend our days working with cool brands with even cooler products.</p>
                <p><strong>The selection:</strong> only the coolest of the coolest products make their way into the HRVST Mystery Box.</p>
                <p><strong>The shipping:</strong> your HRVST Mystery Box will magically show up to your door at the beginning of the month—unless there’s a postal strike.</p>
                <p>Each month we bring local brands together to offer a handpicked box of Montreal-based products to the first 100 shoppers, delivered to your door. Reserve yours today and never look back.</p>
                <p><i>Sourced and packed locally. Not for the faint of heart.</i></p>

                <div id='product-component-83d33f1cc51'></div>

            </div>

</div>

CSS:

    .product__container {display: flex; display: -webkit-flex; flex-direction: column-reverse !important; -webkit-flex-direction: column-reverse !important;}
    .product__image--container, .main-carousel, .flickity-viewport, .carousel-cell {width: 100vw !important; height: 100vw !important;}
    .product__description--container {width: 100vw !important;}
    .flickity-prev-next-button {left: calc(100vw - 140px) !important;}
    div#product-component-83d33f1cc51 {margin: auto !important;} 
}

.shop__wrapper {display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; background-color: #FFFFFF; position: relative;}

.product__container {display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row;}
.product__image--container {height: inherit;}
.main-carousel {height: 100%;}
.flickity-viewport {height: inherit !important;}
.flickity-viewport, .carousel-cell {width: 50vw; min-height: 50vw;}
.carousel-cell {height: inherit;}
.img--one, .img--two, .img--three, .img--four, .img--five {background-position: center center; background-size: cover;}
.flickity-prev-next-button {
    position: relative !important;
    left: calc(50vw - 140px);
    top: -60px !important;
    background-image: url(images/Asset_9.svg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    width: 30px !important;
    height: 30px !important;
    margin: 10px !important;
}
.flickity-prev-next-button:hover {opacity: 0.7;}
.next {transform: rotate(0deg) !important;}
.previous {transform: rotate(-180deg) !important;}
.flickity-prev-next-button svg {display: none;}
.img--one {background-image: url("images/shop/1.jpg");}
.img--two {background-image: url("images/shop/2.jpg");}
.img--three {background-image: url("images/shop/3.jpg");}
.img--four {background-image: url("images/shop/4.jpg");}
.img--five {background-image: url("images/shop/5.jpg");}

Answer 1

这听起来像是浏览器兼容性错误。特别是如果该元素根本不起作用。 (您的问题不清楚它是否根本不起作用或显示很奇怪。)尝试使用浏览器兼容性检查器。我喜欢 browsershots.com，但还有许多其他免费工具可以检查。