快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

老版本91y游戏中心:IE的双边距BUG



一、什么是双边距Bug?

先来看图:

我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页结构中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型利用以下CSS属性:

以下为引用的内容:

.floatbox {

float: left;

width老版本91y游戏中心: 150px;

height: 150px;

margin: 5px 0 5px 100px;

/*外边距的着末一个值包管了100像素的间隔*/

}

很简单,对吧?然则当我们在IE6中查看时,会发明左侧外边距100像素,被扩大年夜到200个像素。如下图:

二、怎么会这样?

说实话,这个缘故原由还真是不清楚。然则这样的结果确老版本91y游戏中心确凿其实IE6中呈现了。而且这种环境呈现的前提是当浮动元素老版本91y游戏中心的浮动偏向和浮动界限的偏向同等时才会呈现。犹如上面老版本91y游戏中心的例子一样,元素向左浮动并且设置了左侧的外边距呈现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会呈现同样的环境。同一行假如有多个浮动元素,第一个浮动元素会呈现这个双边距bug,其它的浮动元素则不会。

三、若何修正这个Bug?

很简单,只必要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:

CSS代码如下:

以下为引用的内容:

.floatbox {

float: left;

width: 150px;

height: 150px;

margin: 5px 0老版本91y游戏中心 5px 100px;

display: inline;

}

您可能还会对下面的文章感兴趣: