双倍边距问题

如果你同时设置元素向一侧浮动和外边距，你会很吃惊的发现，你的布局总不能够如人所愿。原来这是IE 6及其以下版本的双倍边距问题。

试验：

 

<style type="text/css">

body {/* 清除页边距 */

    padding:0;                          /* 清除标准浏览器页边距 */

    margin:0;                          /* 清除IE页边距 */

}

div {/* 公共样式 */

    margin-left:50px;                         /* 左侧外边距 */

    200px;                            /* 宽度 */

    height:100px;                            /* 高度 */

    border:solid 1px red;                      /* 边框 */

}

.box2 {

    float:left;                                /* 向左浮动 */

}

</style>

<div class="box1">参考元素</div>

<div class="box2">浮动元素</div>

看看效果

 

此类问题的解决比较简单，你只需要在浮动元素中增加display:inline;规则即可。

.box2 {

    float:left;                                /* 浮动显示 */

    display:inline;                     /* 行内显示 */

}