《解决ie6中左浮动 左边双倍问题》由会员分享，可在线阅读，更多相关《解决ie6中左浮动 左边双倍问题（3页珍藏版）》请在金锄头文库上搜索。
1、解决 IE6 中左浮动 左边双倍问题一：什么是双边距 Bug？一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在 IE/Win 中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！先来看一下图片：在下面的实验中，我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧 100 像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下 CSS
2、属性：以下为引用的内容：.floatbox float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; /*外边距的最后一个值保证了 100 像素的距离*/ 看起来是很简单的吧？但是当我们在 IE6 中查看时，却会发现左侧外边距 100 像素，被扩大到 200 个像素。如下图：二：该如何来修正这个 Bug？这个修正其实很简单，只需要给浮动元素加上 display:inline;这样的 CSS 属性就可以了。就这么简单？对，就这么简单。如下图：CSS 代码如下：以下为引用的内容：.floatbox float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; 以上方法是我在网页设计中总结出来并不断实践过的方法，希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益！
