Question

我在safari中遇到了一些问题。它在各处工作但不在野生动物园。我在我的网站上有一些图像，但在safari上，图像正在变高。

该网站是development.mar-bakker.nl

<div class="col-xs-12 col-sm-4 col-md-4">
                <div class="grid wow zoomIn">
                    <figure class="effect-bubba">
                        <img src="assets/images/item-2.jpg" class="img-responsive" alt="img01"/>
                        <figcaption>
                            <h2>Webshop <span>PC4U</span></h2>
                            <p>Lily likes to play with crayons and pencils</p>
                        </figcaption>           
                    </figure>
                </div>

            </div>

css是这样的：

    figure.effect-bubba {
    background: #9e5406;
}
figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 10%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
    color: #fff;
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

有人可以帮助我。

Answer 1

我发现了错误！这是一个不同的CSS元素

   .grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 2

尝试删除.grid图形img选择器

中的max-width和min-height定义

.grid figure img { position: relative; display: block; /* min-height: 100%; */ /* max-width: 100%; */ opacity: 0.8; }

野生动物园中的图像高度

2 个答案: