特定于Opera的布局问题(浮动)

Question

我有一个论坛标题栏(有论坛名称和主题标题).论坛名称,不久,将被剪切并显示:hover.目标是让帖子标题在论坛名称旁边开始,悬停与否,以及在太长时间内剪切.

以下简化的测试用例适用于Chrome和FF,但不适用于Opera(在11.50 alpha测试,最新稳定,在mac上测试).

正确的行为:主题标题(红色轮廓的标题)与论坛名称一致.

我在Opera什么:文本消失了-实际上是由隐藏overflow:hidden在.nav_bar,它就会被移到下一行.

Answer 1

display: inline-block; float: left是不合逻辑的,因为float: left力量display: block.

由于你的使用white-space: nowrap,我将继续保持display: inline-block和放弃float: left.

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

它现在始终可见,但文本在大多数浏览器中都没有对齐.

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

这在Chrome,Firefox,Opera,IE9/8之间是有效的.

(我意识到我并没有真正解决Opera在这里显示不同的原因.尽管display: inline-block; float: left彼此之间存在冲突,但结果已明确定义.)