我在 safari 上遇到了兼容性问题。我制作了一个 Web 应用程序,但不幸的是它无法正确显示。我不确定它有什么问题。我已经检查了我可以使用的所有样式,一切都应该没问题。我认为问题可能出在 CSS 中的 .car__hubcap
和变量上,这通常是一个不受欢迎的解决方案。
.car-wrapper {
background-image: url('#');
background-size: cover;
background-position: center;
flex-basis: 68vh;
width: 100vw;
position: relative;
margin-left: auto;
}
.car-menu {
height: 60vh;
left: 0;
top: 0;
width: 12vw;
position: absolute;
}
.car-menu__model-list {
width: 12vw;
overflow: scroll;
background-color: white;
}
.car-menu__color-list {
display: flex;
flex-direction: column;
align-items: center;
width: 12vw;
overflow: scroll;
background-color: white;
}
.car-menu__li {
width: 100%;
cursor: pointer;
}
.car-menu__li img {
object-fit: cover;
width: 100%;
}
.car {
display: flex;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: auto;
transform: translateY(-50%);
top: 50%;
padding-left: -10vw;
}
.car--size {
--d: 4;
/* diameter of wheels. Doesn't matter what units - just use the same units for all these measurements*/
--lf: 6.38;
/* distance from left edge of the image to center of front wheel */
--rb: 7.5;
/* distance from right edge of the image to center of back wheel */
--bf: 2.45;
/* distance from bottom of image to center of front wheel */
--bb: 2.45;
/* distance from bottom of image to center of back wheel */
--w: 30;
/* width of the image */
--h: 11;
/* height of the image */
}
.car--size-default {
--d: 4;
--lf: 6.38;
--rb: 7.5;
--bf: 2.45;
--bb: 2.45;
--w: 30;
--h: 11;
}
.car--size-mercedes {
--d: 4;
--lf: 6.38;
--rb: 8.55;
--bf: 2.45;
--bb: 2.45;
--w: 30;
--h: 11;
}
.car--size-range {
--d: 4.4;
--lf: 6.38;
--rb: 8.33;
--bf: 2.45;
--bb: 2.45;
--w: 30;
--h: 11;
}
.car--size-vw {
--d: 4;
--lf: 6.38;
--rb: 7.1;
--bf: 2.45;
--bb: 2.45;
--w: 30;
--h: 11;
}
.car--size-fiat {
--d: 3.3;
--lf: 6.38;
--rb: 9.65;
--bf: 2.35;
--bb: 2.35;
--w: 30;
--h: 11;
}
.car--size-van {
--d: 2.9;
--lf: 5.95;
--rb: 8.53;
--bf: 2.15;
--bb: 2.15;
--w: 30;
--h: 11;
}
.car--size-bus {
--d: 2;
--lf: 6.42;
--rb: 9.5;
--bf: 1.5;
--bb: 1.5;
--w: 30;
--h: 11;
}
.car--size-truck {
--d: 2.2;
--lf: 8.625;
--rb: 12.45;
--bf: 1.55;
--bb: 1.55;
--w: 30;
--h: 11;
}
.car__hubcap {
position: absolute;
width: calc((var(--d) / var(--w)) * 100%);
height: calc((var(--d) / var(--h)) * 100%);
background-image: url('#');
background-position: center;
background-size: cover;
border-style: solid;
}
.car--hubcap-front {
bottom: calc((var(--bf) / var(--h)) * 100%);
left: calc((var(--lf) / var(--w)) * 100%);
transform: translateX(-50%) translateY(50%);
}
.car--hubcap-back {
bottom: calc((var(--bb) / var(--h)) * 100%);
right: calc((var(--rb) / var(--w)) * 100%);
transform: translateX(50%) translateY(50%);
}
.car__img {
margin: 0 auto;
width: 100%;
}
.logo {
position: absolute;
width: 10vw;
top: 0;
right: 5%;
overflow: visible !important;
}
.background-menu {
position: absolute;
bottom: 0;
right: 0;
}
.background-menu__element img {
width: 5vw;
cursor: pointer;
}
.is-hidden {
display: none !important;
z-index: -1 !important;
}
.visibility {
visibility: hidden;
}
.is-hidden .splide__arrows {
visibility: hidden;
}
<main class="car car--size-default">
<img src="#" class="car__img">
<div class="car__hubcap car--hubcap-front"></div>
<div class="car__hubcap car--hubcap-back"></div>
<img src="#" alt="górecki logo" class="logo">
<ul class="background-menu">
<li class="background-menu__element"><img src="#"
class="background-menu__image" data-background="tlo_4"></li>
<li class="background-menu__element"><img src="#"
class="background-menu__image" data-background="tlo_2"></li>
<li class="background-menu__element"><img src="#"
class="background-menu__image" data-background="tlo_3"></li>
</ul>
</main>
如果您有任何问题,请随时提问:)