html - 为什么 Chrome 和 IE 显示的横幅尺寸与 Firefox 不同？

问题描述

我已经完成了一个网站（在设计时使用 Firefox 作为默认浏览器），但是在不同的浏览器中进行测试后，我可以看到该网站的滑动横幅部分在 Chrome 或 IE 中显示的比例不正确。

不仅如此，我用来滑动图像的关键帧也会导致一半的图像被带出屏幕。虽然我认为这可能更多地与幻灯片的容器的实际尺寸调整有关？

这是我适用于横幅部分的代码：

#homepage-banner {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 82vh;
    overflow: hidden;
}

.homepage-slider img {
    display: inline-block;
    cursor: pointer;
}

.homepage-slider {
    top: 3.5em;
    width: 500%;
    position: absolute;
    display: flex;
    animation: 24s slider infinite;
}

.homepage-slider:hover {
    animation-play-state: paused;
}

@keyframes slider {
    0%, {
        left: 0%;
    }

    23% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    48% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    73% {
        left: -200%
    }

    75% {
        left: -300%;
    }

    98% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

<section id="homepage-banner">

    <div class="homepage-slider">
        <img class="freezeslideshow" id="slideImageOne" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageTwo" src="images/hero-banner/plant-protein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageThree" src="images/hero-banner/image5.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFour" src="images/hero-banner/imaged3.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFive" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
    </div>

</section>

第一个屏幕截图显示了 Firefox 显示的内容，第二个显示了 Chrome 和 IE 显示的内容。

一般来说，我该如何处理这些前缀？我什至认为它与前缀有关是正确的假设吗？

标签： htmlcssgoogle-chromeinternet-explorerflexbox

html - 为什么 Chrome 和 IE 显示的横幅尺寸与 Firefox 不同？

问题描述

解决方案

推荐阅读