Question

我希望有人经历过与此相似的事情，可以指出我正确的方向，因为它让我疯狂。

我设置了以下代码（对不起，我无法提供测试链接），它在FF，Chrome，IE8中显示效果很好，但在IE7和IE6中，我遇到了一个奇怪的浮动/包装问题。< / p>

看来，没有明显的原因，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>

显示如下：

带背景的长标题
背后的文字

和

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

如果我移除浮动，背景颜色会跨越整个宽度（我不想要），但文本不再包裹。

有人有什么想法吗？

::编辑::

以下是一些其他信息/截图。

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

底部是FireFox，IE8正常模式，Chrome

http://awesomescreenshot.com/0a4en0paa

在我的故障排除中，我确定包裹的线条受到其上方线条的影响。示例：如果面包屑很长，标题将有一个短包装，如果面包屑很小，标题可能根本不会包装。

如果我进行

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

实际代码：

<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模式中为我工作。

IE7，浮动元素，内容包装，错误？

1 个答案: