Html 为什么Chrome和IE显示的横幅与Firefox不同？

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

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

以下是适用于横幅部分的代码：

#主页横幅{
宽度：100%；
位置：相对位置；
证明内容：周围的空间；
高度：82vh；
溢出：隐藏；
}
.img{
显示：内联块；
光标：指针；
}
.主页滑块{
顶部：3.5em；
宽度：500%；
位置：绝对位置；
显示器：flex；
动画：24秒滑块无限；
}
.主页滑块：悬停{
动画播放状态：暂停；
}
@关键帧滑块{
0%, {
左：0%；
}
23% {
左：0%；
}
25% {
左-100%；
}
48% {
左-100%；
}
50% {
左-200%；
}
73% {
左：-200%
}
75% {
左-300%；
}
98% {
左-300%；
}
100% {
左-400%；
}
}

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

---

一般来说，我如何处理这类前缀？我是否认为这与前缀有关？你能尝试将以下CSS添加到你的img中吗：

最大宽度：100%

？

我建议你使用

转换属性而不是绝对定位。

因此，动画将在合成层中播放

然后您的代码可以简化如下：


#主页横幅{
位置：相对位置；
宽度：100%；
高度：82vh；
溢出：隐藏；
}
.img{
宽度：20%；
光标：指针；
}
.主页滑块{
显示器：flex；
宽度：500%；
动画：24秒滑块无限；
}
.主页滑块：悬停{
动画播放状态：暂停；
}
@关键帧滑块{
0%,
{
转换：translateX（0）
}
23% {
转换：translateX（0）
}
25% {
转换：translateX（-20%）
}
48% {
转换：translateX（-20%）
}
50% {
转换：translateX（-40%）
}
73% {
转换：translateX（-40%）
}
75% {
转换：translateX（-60%）
}
98% {
转换：translateX（-60%）
}
100% {
转换：translateX（-80%）
}
}

增加
宽度：20%到
。主页滑块img
应该可以解决您的问题。目前，没有任何东西可以告诉你的图像有多大。或者，您可以将该容器设置为
display:flex并给出图像
flex:1。如果您更改传送带中的图像数量，则更新的行数将减少。
我的猜测是，这是因为您使用了相对单位，如
vh
和
em
来调整大小。一般来说，这是一个好主意，但在不同的浏览器和屏幕大小中，这些想法并不一致

他
vh
单位实际上是“视图高度”的一个百分比，即网站的可视大小。因此
82vh
意味着可见屏幕大小的
82%
，因此，如果要垂直调整窗口大小，此框也将更改大小，以便保持该百分比大小。这意味着，如果某人的浏览器工具栏显示更改了网站的可视大小，则此框的大小将不同

如果你想让这些浏览器的大小完全相同，可以使用像素

（PS：我在训练前使用MP突击，太棒了！：p）
克里斯就是这么做的……在修补了这方面的问题后，它现在可以正常显示了。哈哈，我想我可能也需要跳上那个副刊了！感谢您对我的博文的贡献；）