css - 填充过渡和固定大小的 Chrome 问题

Question

我刚刚意识到我网站上的元素预告片不会在谷歌浏览器中调整悬停时的大小。我把它写到 Fiddle 中，发现它是固定大小的。

width: 120px;
height: 120px;
padding: 10px;
transition: padding 0.3s ease;

请参阅此 fiddle :http://jsfiddle.net/o63qjeo6/2/

它适用于 Safari 和 Firefox，但仅当您将高度设置为“自动”时才能在 Google Chrome 中使用。

有没有人对此有解决方法(除了将值设置为“自动”)或对此错误的可能解释？

我想知道为什么它在 Safari 中工作，因为两者都使用 Webkit。

Answer 1

这是因为您启用了 box-sizing: border-box;。

JSfiddle Demo