css - IE7， float 元素，内容环绕，错误？

Question

我希望有人经历过类似的事情，并能为我指明正确的方向，因为它让我抓狂。

我设置了以下代码(抱歉，我无法提供测试链接)，它在 FF、Chrome、IE8 中显示效果很好，但在 IE7 和 IE6 中，我遇到了一个奇怪的 float /环绕问题。

虽然没有设置宽度，但 h1 标签和 h2 标签似乎无缘无故被换行了。

<div style="width:900px; margin:0 auto;">

<h1 style="float:left; background:#ccc">a long title with background behind text<h1>
<h2 style="float:left; background:#ccc">a longer sub title that also has a background behind text.<h2>

</div>

显示如下:

带背景的长标题
文字后面

和

一个更长的子标题，也有一个
文本后面的背景。

如果我删除 float ，背景颜色将跨越整个宽度(我不想要)但文本不再换行。

有人有什么想法吗？

::编辑::

这是一些附加信息/屏幕截图。

下图显示了两个显示。顶部是使用文档模式在 IE6、IE7 和 IE8 中的显示方式:IE7 标准。

最下面是FireFox、IE8普通模式、Chrome

http://awesomescreenshot.com/0a4en0paa

在我的故障排除中，我确定换行的线受其上方的线影响。示例:如果 crumb 很长，标题将短换行，如果 crumb 很小，标题可能根本不换行。

如果我制作

display:inline，标题将正确显示，但子标题将根据标题的长度换行。还使它成为内联元素会破坏文本周围的填充。

实际代码:

<div id="hero" style="background:url(images/bg-hero.jpg) center top no-repeat;">
    <div class="panel-content">
        <p style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">this / is / a bread / crumb / trail / which seems to influence the following item's width</p>
        <h1 style="background:rgb(0,100,175); background:rgba(0,100,175,.7);">Title of the page which should span the width</h1>
        <h2 style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">sub title which should behave the same way and span the availble width</h2>
    </div>
</div>

CSS:

#hero { position:relative; z-index:0; color:#fff; width:100%; min-width:1024px; margin:0 0; overflow:hidden; height:238px; background:url(images/bg-hero-default.jpg) center top no-repeat }
#hero .panel-content {  width:978px; min-width: 978px; margin:0 auto; padding:35px 23px 0; position:relative; }
#hero p { float:left; font-size:1.5em; line-height:1.6em; padding:0 5px; margin:0 0 5px; }
#hero h1 { float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em; }
#hero h2 { float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px; }

Answer 1

在你的 hx 声明中添加一个 white-space:nowrap;

#hero h1 {float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em;white-space:nowrap; }
#hero h2 {float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px;white-space:nowrap; }

在 ie8、ie7 模式下为我工作。