IE7，浮动元素，内容包装，错误？
IE7，浮动元素，内容包装，错误？
提问于 2011-06-10 22:57:49
我希望有人经历过类似的事情，并能为我指出正确的方向，因为这让我发疯。
我有下面的代码设置(很抱歉我不能提供测试链接)，它在FF，Chrome，IE8中显示很好，但在IE7和IE6中我遇到了一个奇怪的浮动/包装问题。
似乎没有明显的原因，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>它的显示方式如下：
有背景的长标题
在文本后面
和
一个更长的副标题，也有一个
文本后面的背景。
如果我移除浮动，背景颜色会覆盖整个宽度(我不想这样)，但文本不再换行。
有谁有什么想法吗？
：：编辑：：
这里有一些额外的信息/截图。
下图显示了这两个显示。顶部是如何使用文档模式: IE7标准在IE6、IE7和IE8中显示。
底部是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; }回答 1
Stack Overflow用户
发布于 2011-06-11 03:08:35
将white-space:nowrap;添加到hx声明中
#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模式下为我工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6308140
复制相关文章
相似问题
腾讯云开发者
