做页面时遇到一个奇怪的空白边叠加
样式:
<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
不确定是不是真的是空白边叠加引起的问题,也没有很好的解决方案,知道的朋友请不吝赐教
分享到:
相关推荐
同时,浮动元素(float)和绝对定位元素(position: absolute)的空白边不会发生叠加,因为它们脱离了正常的文档流。 了解和掌握空白边叠加的原理对于实现精确布局至关重要,它可以帮助我们避免布局中出现不必要的...
在CSS布局中,"空白外边距互相叠加"是一个常见的问题,它涉及到元素之间的外边距合并规则。当两个或多个块级元素的外边距相邻时,它们的垂直外边距并不简单相加,而是取其中的最大值作为最终的外边距。这在某些情况...
在 IE7.0 及以上版本浏览器中,margin-bottom 和 margin-top 属性可以叠加,所以两个 DIV 之间的空白距离为 10px + 15px = 25px,但因为 margin-bottom 的优先级高于 margin-top,所以实际的空白距离为 15px。...
8. 两个DIV之间的空白距离:在IE7.0及以上版本,两个具有边距的`div`之间会有叠加效果,因此总距离是 `10px + 15px = 25px`。 9. 阻止浮动元素在同一行:使用 `clear:both;` 可以阻止两个浮动的`div`在同一行显示。...
外边距塌陷是指两个或多个元素的外边距叠加在一起时,实际占用的空间小于每个元素的外边距之和。解决方法包括使用margin-collapse、padding、border等。 3. 清除浮动的方法 浮动(float)可以使元素脱离文档流,但...
/* 图形左侧空白控制 */ printf("*"); /* 圆的左侧 */ for(; x ; x++) printf(""); /* 图形的空心部分控制 */ printf("*\n"); /* 圆的右侧 */ } return 0; } ``` **思考题解答** - 实现函数 y = x^2 的...
2. **层叠机制**:CSS的核心在于层叠,即当多个样式规则应用于同一个元素时,它们会按照优先级进行叠加,使得样式管理更为灵活。 3. **定位与布局**:CSS2提供了绝对定位、相对定位和固定定位,让元素可以在页面上...
- **浮动模型(Float)**:允许元素脱离文档流,漂浮在其他元素的一侧。 - **层模型(Layer)**:通过定位技术使元素可以相互叠加。 ##### 6.1 流动模型(Flow) - **定义**:这是最基本的布局模型,适用于没有...
1. **实现函数 y=x^2 的图形与圆的图形叠加显示**: - 可以类似地计算抛物线的坐标,并使用条件判断来决定何时绘制圆何时绘制抛物线。 #### 歌星大奖赛 **知识点**: 1. **数组应用**: 使用数组来存储评委的评分。 ...
**18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?** - 这些特性共同作用于元素的布局和显示方式,具体表现取决于它们之间的组合关系。 **19、对BFC规范(块级格式化上下文...
浮动(float)常用于创建多列布局,`clear`属性用于处理浮动元素的布局问题,`clear: both`可以清除两侧的浮动。 定位(positioning)包括相对定位和绝对定位。相对定位是相对于元素原本的位置,而绝对定位则是相...