IE6/IE7下,li设置float后,行高变高问题__UL的padding-top Bug
问题描述:li设置float属性后,IE6/IE7下行高变高
分析解决:在IE6/IE7下,由于设置了ul的padding-top属性。导致浮动后的li行高变高。
代码示例:
<style> ul{ width:500px; padding-top:50px;} li{ width:250px; height:100px; float:left;} </style>
<ul> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> </ul>
以上代码会导致出现li的高度变高,并非设置的100px;
解决办法:出现这种情况,解决办法有很多种,以下是一种解决示例
<style> div{padding-top:50px;} ul{ width:500px;} li{ width:250px; height:100px; float:left;} </style>
<div> <ul> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> <li><img src='images/demo/listImg.png'></li> </ul> </div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步