gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:37:56 28 4
gpt4 key购买 nike

我正在为单页网上商店使用 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");}

最佳答案

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

关于javascript - 带有图像 slider 的 Div 仅在 Safari 中不继承高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44374121/

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