【记】关于div容器被撑开的问题

    我最近遇到了div被撑开的问题，无论是要不要被撑开，总之各个浏览器之间的显示是不一样的。首先看下这段代码：

<style>
.outer{border:2px solid red; width:100px; height:300px;}
.inner{border:1px solid blue; width:300px; height:200px;}
</style>
<div class="outer">
    <div class="inner"></div>
</div>

    我们可以在IE6和其他浏览器上看到的效果是不一样的。

 

    两个图中是不同的效果，第一个图是IE789、FireFox、chrome等浏览器（标准模式）的显示结果。第二个图是IE6下显示的结果。我们清楚的看到，IE6下，外部的容器被自动的撑开了，而其他的浏览器没有被撑开。无论我们想要的效果是图1还是图2，在这里我都进行了尝试。算是解决这个问题的一个参考思路吧。

     首先是如果我们想让其他浏览器自动撑开。这里我的一个解决办法是将外面的容器添加这样一个属性：position:absolute，并且删掉outer中的width，这样，各个浏览器就会根据里面容器的宽度自动撑开了。当然，也可以添加一个min-width来控制最小宽度。

    接下来就是不让外部容器自动撑开。我们看到，除了IE6（由于我的操作系统是win7，IE是9，在IE9的开发者工具中是这样的）之外，其他的浏览器都没有撑开，因此，我们只针对IE6处理，看看如何能不让他自动撑开。在网上找了一下，大部分的结果是overflow:hidden，但是如果我们一定要都显示，我在这里使用的是将内部容器添加position:absolute。这样，里面的内容就会脱离出外部的容器，从而达到显示的效果。

    当然，上面的所有方法都对position做了修改，这样的修改会对容器的性质产生很大的变化，因此，在使用上述的方法之后，网页的布局可能就会发生部分的变化，当然，你也可以使用hack来做。但是无论怎么样，都会对页面产生影响，这主要看这个自己的需求需要到什么程度了。