ie7浮右父宽度问题

Question

这个真的是我的山羊.我需要将Container1和Container 2向右浮动,让它们像现在一样彼此对接.我还需要将Container2中的项目向右浮动,以便它们相互堆叠.问题是如果我在Container2中设置任何内容(示例文本2,示例文本3)向右浮动它会使Container2宽度为100%或者其他东西.

这可以通过给Container2一个特定的宽度来解决,但这是不可能的,因为所有这些都是动态内容.我需要Container2增长,因为我在里面堆叠东西.

有没有办法解决？它只是ie7中的一个问题所有其他浏览器似乎都没问题.这让我很生气.

<div>
    <div style="width: 100px; height: 100px; background: green; float: left;">
    </div>
    <div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
        sample text 1
    </div>
    <div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
        <div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
        <div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
    </div>
</div>

Answer 1

我无法在Internet Explorer 7中找到此错误的修复程序.

可能有一个,我不知道.我尝试了所有常用的技巧.

这是一些利用的返工代码display: inline-block.

它看起来与IE8中的旧代码相同,并且在IE7/8和其他现代浏览器中是一致的.好极了!

请参阅: http ://jsfiddle.net/SUPhf/

有许多事情需要注意:

• 请参阅以下链接以了解display: inline-block:
  • 特别是:http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  • 还有:http://www.brunildo.org/test/inline-block.html
• 我不得不交换源代码中的元素顺序,以保持视觉显示相同.
• 当您使用时,HTML中的空格非常重要display: inline-block.
  • 将上面的完全固定链接与此版本进行比较,其中唯一的变化是额外的空格:http:
    //jsfiddle.net/SUPhf/1/

既然你已经意识到这些警告,那应该没问题.