我正在尝试制作一个< dl>定义我在页面上使用的图标.我想要它,以便每个图标都在< dt>内.它的定义在以下< dl>内.在每个图标定义之后,我想要一个换行符.简单吧?好吧,IE7说没有!
这是我的HTML:
<dl style="display: block;" id="surveysIcons" class="icons"> <dt class="clearfix"><span class="icon"><img alt="Complete" title="" src="images/fiq_complete.png"></span></dt> <dd>You have completed the survey</dd> <dt class="clearfix"><span class="icon"><img alt="Incomplete" title="" src="images/fiq_incomplete.png"></span></dt> <dd>You have missed the survey</dd> </dl>
这是我的CSS:
dl.icons { margin: 0 0 1em 0; padding: 0; width:100%; overflow:hidden; line-height:24px; clear: both; } dl.icons dt { clear:left; margin:0; float:left; min-height:24px; } dl.icons dd { padding: 3px; margin: 0 0 0 5px; float:left; min-height:24px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */
我的方法是浮动< dt>和< dd>左,并清除每个< dt>,遗憾的是,它在IE 7中不起作用.
我尝试了所谓的魔法clearfix,但无济于事.这适用于Firefox和IE 8.
任何其他可能使这项工作成功的想法(最好不要改变太多的HTML)?谢谢!
解决方法
从dl.icons dd中删除float:left
原文地址:https://www.jb51.cc/css/215811.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。