绝对定位的元素在IE6下莫名丢失解决办法
前几天做春运的页面时遇到的一个问题.
下面为形成此问题的代码:
<style>
.wrap{position:relative;width:400px;height:300px;border:1px solid #000;}
.box{background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
.test1{background:green;width:200px;height:100px;float:left;}
.test2{background:blue;width:200px;height:100px;float:left;}
</style>
<div class="wrap">
<div class="box">123456789</div>
<div class="test1">abc</div>
<div class="test2">def</div>
</div>
此时.class名为"box"的元素在IE6下完全不见了.
经过测试.发现这个问题的形成条件:
1.box为绝对定位的元素.
2.box的相邻元素都为浮动元素.
3.相邻浮动元素的宽之和>=其父级元素的宽.
解决办法:
1.设置其相邻浮动元素的margin;
.test1{background:green;width:200px;height:100px;float:left;margin-right:-3px;}
2.在box外层加一层position:relative的包裹.
<style>
.wrap{position:relative;width:400px;height:300px;border:1px solid #000;}
.add-wrap{position:relative;}
.box{background:red;width:100px;height:200px;position:absolute;left:50px;top:100px;}
.test1{background:green;width:200px;height:100px;float:left;}
.test2{background:blue;width:200px;height:100px;float:left;}
</style>
<div class="wrap">
<div class="add-wrap">
<div class="box">123456789</div>
</div>
<div class="test1">abc</div>
<div class="test2">def</div>
</div>
在网上看到别人还有很多其他的解决这个问题的办法.
例如插入空白DIV等.
但个人觉得还是第二种方法最好.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述