库中的缩略图描述部分覆盖 - 浮动：左侧问题？

Question

请参阅http://jsfiddle.net/ZdjrT/ - 前两个缩略图下的文字部分模糊不清。

如果我在描述中设置了一个高度，我可以解决这个问题，但显然描述高度取决于那里有多少内容，所以它不是我可以设置的静态值。

还有其他解决方案吗？

谢谢， 韦斯利

Answer 1

文本被掩盖的原因是因为它超过你为a.thumbnail明确设置的120px高度。解决方案是摆脱那个高度声明，但这可能导致交错的行不排队。

的解决方案是使用display:inline-block而不是float:left。因为你只在自然内联的a元素上执行此操作，所以它应该在IE6 +中工作。

Here's the fiddle to prove it（请注意vertical-align:top）

Answer 2

查看此修订版：http://jsfiddle.net/ZdjrT/5/ 我将a.thumbnail显示为内联块并移除了浮动。将高度更改为auto，然后将img显示为块元素。似乎可以在IE7 / 8，Chrome和FF中使用。