Html css-div框在悬停时抖动

我有一个css的问题-我想有0.3平稳过渡的一个div悬停和其他div保持原样。div排成一行，每当我在div的右侧（2,4,6-在jsfiddle中）悬停时，下一行div都在晃动。我已经尝试并引用了许多网站来修复它。你能帮我做这个吗

这段代码在safari上运行良好。但是，在其他浏览器上没有

#日期列表{
背景色：白色；
宽度：计算（80%-25px）；
显示：内联块；
保证金：7.5px0px 7.5px5px；
边界半径：5px；
填充：7.5px；
文本对齐：居中；
}
.displaydate{
宽度：计算（50%-32px）；
身高：35vw；
背景色：#fafeff；
颜色：#05336D；
字体大小：1.1vw；
字体系列：“Roboto”，无衬线；
显示：内联块；
z指数：9；
浮动：左；
利润率：10px；
填充物：5px；
边框：1px#bce6fb实心；
边界半径：0.75vw；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
过渡：所有0.3秒的缓进缓出；
}
.displaydate:悬停{
背景色：#00AADC；
颜色：白色；
边框颜色：#00AADC；
宽度：计算（50%-12px）；
高度：计算（35vw+20px）；
边际：0px；
溢出：继承；
z指数：10；
字体大小：1.15vw；
盒影：0px 7.5px 7.5px#93AAB6；
}

1.
2.
3.
4.
5.
6.

不要同时使用

显示：内联块

和

浮动：左

。这只会把事情搞得一团糟

我还强烈建议您在使用填充物时使用

*{border box:box size；}

。那将对你有很大帮助

还有。当您使用内联块时，我建议您使用

垂直对齐：top

，以便元素始终完美对齐

所以要解决你的问题；删除

float:left

并添加上述代码。那么它应该会起作用

我已经修改了您现有的代码，因此它现在可以像预期的那样工作

*{
框大小：边框框；
}
#日期表{
背景色：白色；
宽度：计算（80%-25px）；
显示：内联块；
保证金：7.5px0px 7.5px5px；
边界半径：5px；
填充：7.5px；
文本对齐：居中；
}
.displaydate{
显示：内联块；
宽度：计算（50%-32px）；
身高：35vw；
背景色：#fafeff；
颜色：#05336D；
字体大小：1.1vw；
字体系列：“Roboto”，无衬线；
z指数：9；
利润率：10px；
填充物：5px；
边框：1px#bce6fb实心；
边界半径：0.75vw；
垂直对齐：顶部；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
过渡：所有0.3秒的缓进缓出；
}
.displaydate:悬停{
背景色：#00AADC；
颜色：白色；
边框颜色：#00AADC；
宽度：计算（50%-12px）；
高度：计算（35vw+20px）；
边际：0px；
溢出：继承；
z指数：10；
字体大小：1.15vw；
盒影：0px 7.5px 7.5px#93AAB6；
}

1.
2.
3.
4.
5.
6.

为什么不在悬停时使用此CSS:transform:scale（1.1）；更改悬停时的大小会导致元素从光标下移出。