布局问题（浮动）特定于Opera [英] Layout problem (floats) specific to Opera

问题描述

我有一个论坛标题栏（有论坛名称和主题标题）。论坛名称，当长时，剪辑并显示在：hover 。目标是让线程标题在论坛名称旁边开始，悬停或不停止，如果过长则剪辑。

I have a forum title bar (with forum name and thread title). Forum name, when long, is clipped and revealed on :hover. The objective is to have the thread title to begin next to forum name, hovered or not, and also clipped, when too long.

以下 reduce测试用例适用于Chrome和FF，但不适用于Opera（测试版本为11.50 alpha，最新稳定，均为mac）。

The following reduced test case works in Chrome and FF but not in Opera (tested on 11.50 alpha, and latest stable, both on mac).

正确的行为：线程标题（带红色轮廓的标题）与论坛名称一致。

Correct behaviour: thread title (the one with red outline) is in line with forum name.

我在Opera中得到的文字已消失 - 实际上由 overflow：hidden 隐藏。

What I get in Opera: the text is gone - actually hidden by overflow:hidden on .nav_bar, it gets moved to next line.

推荐答案

display：inline -块; float：left 是不合逻辑的，因为 float：left 强制 display：block 。

display: inline-block; float: left is not logical because float: left forces display: block.

由于您使用 white-space：nowrap ，我将保留 display：inline-block 并拖放 float：left 。

Due to your use of white-space: nowrap, I'm going to keep display: inline-block and drop float: left.

让我们到这里： http://jsfiddle.net/wkA7q/4/

现在是

要解决这个问题，请添加 vertical-align：top 几次： http://jsfiddle.net/wkA7q/5/

To fix that, add vertical-align: top a couple of times: http://jsfiddle.net/wkA7q/5/

这在Chrome，Firefox，Opera和IE9 / 8之间是一样的。

That works and is consistent between Chrome, Firefox, Opera, IE9/8.

'm没有真正解决为什么Opera显示不同的原因。 display：inline-block; float：left 相互冲突，结果已明确定义。）

(I realise that I'm not really addressing the reason why Opera displays differently here. Although display: inline-block; float: left do conflict with each other, the outcome is well defined.)

这篇关于布局问题（浮动）特定于Opera的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！