`
jianhan513
  • 浏览: 20769 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

float后仍然出现空白边叠加

阅读更多

做页面时遇到一个奇怪的空白边叠加

样式:

<style>
.wrapper{font:12px/1.5 "宋体";width:500px}
ol{margin:0;padding:0;float:left;width:100%;}
li{float:left;width:100%;margin:20px auto; }
.c{clear:both;margin:0;padding:0;font-size:1px;height:1px;overflow:hidden;background:green}
</style>

内容:

<div class="wrapper">
<ol onclick="alert(this.offsetHeight)" style="background:#666">
    <li>立体化的竞争机制:提升学习热情</li>
    <li>立体化的竞争机制:提升学习热情</li>
    <li>立体化的竞争机制:提升学习热情</li>
    <li style="clear:both" id="last" >立体化的竞争机制:提升学习热情</li>
</ol>
<ol onclick="alert(this.offsetHeight)" style="background:#ddd">
    <li id="first" >立体化的竞争机制:提升学习热情</li>
    <li>立体化的竞争机制:提升学习热情</li>
    <li>立体化的竞争机制:提升学习热情</li>
    <li>立体化的竞争机制:提升学习热情</li>
</ol>
</div>

按照正常情况,当元素浮动以后,就不会出现margin collapse现象,或者在上下加了padding或border后也可以解决margin collapse,但在这里有两个地方比较奇怪。

id="last" 与 id="first"的li发生了空白边叠加

首先,以上两种方法都没有解决margin collapse

其次,红色样式部分,如果去掉clear:both,IE6下就不存在margin collapse,如果加上,或者给所有li都加上clear:both,IE6,IE7都存在空白边叠加,但IE7始终都存在margin collapse

我使用的解决方案是在第一个ol在增加一个<li class="c"></li>,c的样式见style

不确定是不是真的是空白边叠加引起的问题,也没有很好的解决方案,知道的朋友请不吝赐教

0
0
分享到:
评论

相关推荐

    css空白边叠加的几种情况介绍

    同时,浮动元素(float)和绝对定位元素(position: absolute)的空白边不会发生叠加,因为它们脱离了正常的文档流。 了解和掌握空白边叠加的原理对于实现精确布局至关重要,它可以帮助我们避免布局中出现不必要的...

    css 空白外边距互相叠加的解决方法

    在CSS布局中,"空白外边距互相叠加"是一个常见的问题,它涉及到元素之间的外边距合并规则。当两个或多个块级元素的外边距相邻时,它们的垂直外边距并不简单相加,而是取其中的最大值作为最终的外边距。这在某些情况...

    JavaScript内部测试-笔试试题和答案.doc

    在 IE7.0 及以上版本浏览器中,margin-bottom 和 margin-top 属性可以叠加,所以两个 DIV 之间的空白距离为 10px + 15px = 25px,但因为 margin-bottom 的优先级高于 margin-top,所以实际的空白距离为 15px。...

    JavaScript内部测试-笔试试题和标准答案.doc

    8. 两个DIV之间的空白距离:在IE7.0及以上版本,两个具有边距的`div`之间会有叠加效果,因此总距离是 `10px + 15px = 25px`。 9. 阻止浮动元素在同一行:使用 `clear:both;` 可以阻止两个浮动的`div`在同一行显示。...

    css面试题.docx

    外边距塌陷是指两个或多个元素的外边距叠加在一起时,实际占用的空间小于每个元素的外边距之和。解决方法包括使用margin-collapse、padding、border等。 3. 清除浮动的方法 浮动(float)可以使元素脱离文档流,但...

    C语言100例,C++100例

    /* 图形左侧空白控制 */ printf("*"); /* 圆的左侧 */ for(; x ; x++) printf(""); /* 图形的空心部分控制 */ printf("*\n"); /* 圆的右侧 */ } return 0; } ``` **思考题解答** - 实现函数 y = x^2 的...

    CSS2中文手册(CHM)

    2. **层叠机制**:CSS的核心在于层叠,即当多个样式规则应用于同一个元素时,它们会按照优先级进行叠加,使得样式管理更为灵活。 3. **定位与布局**:CSS2提供了绝对定位、相对定位和固定定位,让元素可以在页面上...

    web前端页面

    - **浮动模型(Float)**:允许元素脱离文档流,漂浮在其他元素的一侧。 - **层模型(Layer)**:通过定位技术使元素可以相互叠加。 ##### 6.1 流动模型(Flow) - **定义**:这是最基本的布局模型,适用于没有...

    C-C++语言趣味程序设计编程百例精解(1)

    1. **实现函数 y=x^2 的图形与圆的图形叠加显示**: - 可以类似地计算抛物线的坐标,并使用条件判断来决定何时绘制圆何时绘制抛物线。 #### 歌星大奖赛 **知识点**: 1. **数组应用**: 使用数组来存储评委的评分。 ...

    前端面试题

    **18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?** - 这些特性共同作用于元素的布局和显示方式,具体表现取决于它们之间的组合关系。 **19、对BFC规范(块级格式化上下文...

    CSS使用学习总结

    浮动(float)常用于创建多列布局,`clear`属性用于处理浮动元素的布局问题,`clear: both`可以清除两侧的浮动。 定位(positioning)包括相对定位和绝对定位。相对定位是相对于元素原本的位置,而绝对定位则是相...

Global site tag (gtag.js) - Google Analytics