解决ie6中左浮动 左边双倍问题

《解决ie6中左浮动 左边双倍问题》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、解决IE6中左浮动左边双倍问题     一：什么是双边距Bug？一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！ 先来看一下图片：    在下面的实验中，我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，

2、我们给绿色盒模型应用以下CSS属性： 以下为引用的内容：.floatbox{float:left;width:150px;height:150px;margin:5px05px100px;/*外边距的最后一个值保证了100像素的距离*/}     看起来是很简单的吧？但是当我们在IE6中查看时，却会发现左侧外边距100像素，被扩大到200个像素。如下图：      二：该如何来修正这个Bug？     这个修正其实很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：     CSS代码如下：以下

3、为引用的内容：.floatbox{float:left;width:150px;height:150px;margin:5px05px100px;display:inline;}以上方法是我在网页设计中总结出来并不断实践过的方法，希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益！