css - Chrome 不会在高度变化时重新计算宽度

Question

我有一个带有链接和图像的缩略图列表，所以当用户将鼠标悬停在 li 元素上时，它的高度变为 100%，但它在 错误 中工作Chrome 出于某种奇怪的原因。我不明白为什么在 Chrome 中悬停的 li 宽度没有调整到它的"new"大小。

(注意:这是我的问题的简化版本)

此外，此问题仅发生在 :hover 上。但不是，可以说， :nth-child

Playground link

更新:问题继续...

在答案中查看我的解决方案，但问题仍然存在..我用鼠标放大，您会看到它发生了..请注意，图像数量可能很大。

更新 2:

强制重绘每个 mousehweel 事件触发...thumbs.hide().show(0);

Answer 1

我的解决方案:Solution playground

这个想法是通过给图像一个新的高度来欺骗 Chrome 重新计算宽度，该高度几乎在 li:hover 状态下相同。但这对 Chrome 来说还不够。转换也必须应用于 img。这都是巫毒编码，但这是我能想到的最不丑陋的解决方案:

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
  li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
  li:hover{ height:100%; }
    li a{ height:100%; padding:0 2px; display:block; }
    li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
    li:hover a img{ min-height:96%; }