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

Question

我有一个带有链接和图像的缩略图列表，所以当用户悬停 li 元素时，它的高度变为 100%，但由于某些奇怪的原因，它在 Chrome 中错误工作的问题.我不明白为什么在 Chrome 中悬停的 li 宽度没有调整到它的“新”大小。

（注意：这是我的问题的简化版）

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

Playground link

更新：问题继续...

在答案中查看我的解决方案，但问题仍然存在..我用鼠标放大，你会看到它正在发生..注意图像的数量可以是巨大的。

更新 2：

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

Answer 1

我的解决方案：Solution playground

这个想法是通过在li:hover 状态下为图像赋予一个几乎相同的新高度来欺骗 Chrome 重新计算宽度。但这对 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%; }

Answer 2

我是新来的，我不确定这是否是一个好的做法，但我会发布我的观察结果，而不是一个精确的解决方案：

1. 同样的问题出现在 Opera 上。

1234563前 - http://jsbin.com/operib/43/edit

这是我不觉得优雅的解决方案，只是一个快速修复： http://jsbin.com/operib/39/edit

编辑：在测试了@Carol McKay 的结果后，我意识到过渡正在把整个事情搞得一团糟。下一个链接（节点 58）是上面链接的节点 43（基本上是节点 1，只是在悬停时为图像添加了边框），移除了过渡，它工作得很好http://jsbin.com/operib/58/edit。

似乎应该在悬停时添加任何 css 规则，以便重新计算 <img/> 尺寸。

Answer 3

改为对图像应用过渡。

css

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

li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }

http://jsbin.com/operib/83/edit