当 img 设置为显示 :block 时，歌剧的 css 问题

Question

检查这个jsfiddle .

一段时间以来，我一直在尝试解决这个问题，但似乎找不到好的解决方案。问题是中心的主要 img 占据了很多高度，这应该与 Opera 相关。但是在其他浏览器中没有这个问题。

当然 float 它会解决这个问题，但它会在图像下产生更多问题(我没有包含代码)。

另一种解决方案是不将#mainImg设置为display:block；但这也会产生一些高度/宽度问题。

那么问题来了，有没有更好的解决方案呢？为什么 Opera 呈现的方式与其他浏览器不同，是什么原因造成的？

Answer 1

Opera 以某种方式扩展了图像的父 block ，因为它附近有 float 。它确实需要更好的调查，但作为快速修复，您可以:

• 将overflow:hidden 添加到.to_thirds block :http://jsfiddle.net/js5Pk/1/
• 或添加display:inline-block; vertical-align:top; 到它:http://jsfiddle.net/js5Pk/2/

关键是要清除此 block 的流上下文，这样正确的 float 就不会以某种方式放置在其中。