当 img 设置为 display:block 时，opera 出现 css 问题
检查这个 jsfiddle。
我已经尝试解决这个问题有一段时间了，但我似乎找不到好的解决方案。问题是中心的主 img 占据了很多高度，而 Opera 应该这样做。但在其他浏览器中没有这样的问题。
当然，浮动它可以解决这个问题，但它会在图像下产生更多问题（我没有包含的代码）。
另一种解决方案是不将 #mainImg 设置为 display:block；但这也会产生一些高度/宽度问题。
那么问题来了，有没有更好的解决方案呢？为什么 Opera 的渲染方式与其他浏览器不同，是什么原因造成的？
Check this jsfiddle.
I have been trying to solve this problem for a while but I cant seem to find a good solution. The problem is that the main img in the center takes up a lot of height then it is supposed to do with Opera. But there is no such problem in other browsers.
Sure floating it will solve this but it creates more problems under the image (code that I have not included).
One other solution is to not set #mainImg to display:block; but that also creates some height/width problems.
So the question is, is there a better solution for this? And why is Opera rendering it differently then the other browsers, what is causing this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Opera 以某种方式扩展了图像的父块，因为它附近有浮动。它确实需要更好的调查，但作为快速修复，您可以：
overflow:hidden添加到.to_thirds块：http://jsfiddle.net/js5Pk/1/display:inline-block; Vertical-align:top;到它： http://jsfiddle.net/js5Pk/2/< /a>重点是清除该块的流上下文，以便正确的浮动不会以某种方式放置在其中。
Opera somehow expands the image's parent block because of the float near it. It sure needs a better investigation, but as a quick fix you can:
overflow:hiddento.to_thirdsblock: http://jsfiddle.net/js5Pk/1/display:inline-block; vertical-align:top;to it: http://jsfiddle.net/js5Pk/2/The point is to clear the flow context for this block so the right float won't somehow be placed in it.