一、实例
XML/HTML Code复制内容到剪贴板- <ul class="list">
- <li><a href="#" title="">新闻一Benjamin</a><span>2014-05-06</span></li>
- <li><a href="#" title="">新闻一Benjamin</a><span>2014-05-06</span></li>
- <li><a href="#" title="">新闻一Benjamin</a><span>2014-05-06</span></li>
- <li><a href="#" title="">新闻一Benjamin</a><span>2014-05-06</span></li>
- </ul>
- <style type="text/css">
- body,ul{padding:0;margin:0;}
- ul{list-style-type: none;border:1px solid #ccc;}
- li{padding-left:0;}
- .list{width:300px;margin:100px auto;}
- .list li{height:24px;line-height: 24px;border-bottom: 1px solid #ccc;margin-bottom:-1px;padding-left: 10px;}
- .list li span{float:rightright;margin-right:10px;}
- .list li .float_a{float:left;}
- .fix {*zoom:1;}
- .fix:after {display: block; content: ".";visibility: hidden;clear: both;height: 0;overflow: hidden;}
- </style>
三、原因分析
1.标准参考:
W3C CSS2.1规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落:
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.
由上面的描述可以得到以下结论:如果一个元素浮动前是一个行内元素,则该元素浮动后,顶部应与其之前所在的行框顶部对齐。
2.问题描述:
IE6 IE7 IE8(Quick)下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边,导致该浮动元素折行。
四、解决方案
1.全浮动
- <ul class="list">
- <li class="fix"><a class="float_a" href="#" title="">新闻一Benjamin</a> <span>2014-05-06</span></li>
- <li class="fix"><a class="float_a" href="#" title="">新闻一Benjamin</a> <span>2014-05-06</span></li>
- <li class="fix"><a class="float_a" href="#" title="">新闻一Benjamin</a> <span>2014-05-06</span></li>
- <li class="fix"><a class="float_a" href="#" title="">新闻一Benjamin</a> <span>2014-05-06</span></li>
- </ul>
2.放置浮动元素在前
CSS Code复制内容到剪贴板- <ul class="list">
- <li><span>2014-05-06</span><a href="#" title="">新闻一Benjamin</a> </li>
- <li><span>2014-05-06</span><a href="#" title="">新闻一Benjamin</a> </li>
- <li><span>2014-05-06</span><a href="#" title="">新闻一Benjamin</a> </li>
- <li><span>2014-05-06</span><a href="#" title="">新闻一Benjamin</a> </li>
- </ul>
3.定位position
4.IE Hack+margin负值
标签:
IE6,IE7,浮动元素
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“IE6和IE7中行内元素后的浮动元素被折行的问题解决”评论...
更新日志
2024年06月10日
2024年06月10日
- 24K德国HD金碟《品味人声·HIFI怀旧篇》3CD[WAV]
- 群星《赤壁名伶DSD》[WAV分轨]
- 华纳群星.1990-华纳夏日4星道REMIX【华纳】【WAV+CUE】
- 滚石群星.1998-‘98滚石最卖座主打歌刷新全纪录(3CD)【WAV+CUE】
- 《金色大厅音箱测试壹号》[WAV+CUE][594M]
- 降央卓玛《金色的呼唤 HQCD》[WAV+CUE][558M]
- 许飞《父亲写的散文诗》DSD黑胶[正版CD低速原抓WAV+CUE][625M]
- Beyond《Beyond极品天碟》LPCD45II首批限量版[低速原抓WAV+CUE]
- 张学友《爱你多一些精选LPCD1630》[FLAC+CUE]
- 【ABC唱片】《模拟的灵魂TheSoulofAualogisBack》》2007年[WAV]
- 《南拳妈妈7CD合集》[WAV+CUE][3.1G]
- 张玮伽《情醉伽音·在爱里(DSD)》[FLAC+CUE][352M]
- 巫启贤《寻贤启事》3CD[WAV分轨][1.6G]
- 群星.1990-宝丽金巨星荟萃(引进版)【宝丽金】【WAV+CUE】
- 群星1989-1991新艺宝金曲金碟VOL.1-4[银圈版][WAV+CUE]