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

Question

我有一个包含链接和图片的缩略图列表，因此当用户悬停li元素时，它的高度变为100％，但问题是Chrome中的某些问题错误奇怪的原因。我不明白为什么在Chrome中，悬停的li宽度不会调整为“新”尺寸。

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

此外，此问题仅发生在: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%; }

Answer 2

我是新来的，我不确定这是否是一个好习惯，但我会发表观察而不是一个精确的解决方案：

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

2. 这对我来说似乎很奇怪 - 当li:hover a img{ border:1px solid black; }或任何类似的css代码不应该对当前情况做出任何改变时，它都会开始表现得很奇怪。前 - 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