怎样实现IE6下块级元素的内容自动紧缩
发布时间：2018-10-04 06:41:07 所属栏目：创业 来源：站长网
导读：近期在做提醒层组件的开拓，碰着了一个IE6常见的bug....想出了几个办理的步伐，挺故意思的，这里分享给各人。 因为IE6赏识器中，display:inline-block只能触发IE的haslayout属性使得元素具有机关属性，当对div元素行使display:inline-block，div元素如故为
|
近期在做提醒层组件的开拓，碰着了一个IE6常见的bug....想出了几个办理的步伐，挺故意思的，这里分享给各人。 因为IE6赏识器中，display:inline-block只能触发IE的haslayout属性使得元素具有机关属性，当对div元素行使display:inline-block，div元素如故为块状机关而占有一行。 那么如安在IE6下使得块级元素的内容自动紧缩呢？开拓圆角小提醒层模块，让它来解答这个题目。
布局和样式： Copy to Clipboard 引用的内容：[www.veryhuo.com]
/** * @name : prompt * @explain : 圆角小提醒层 * @type : 基类 * @dependent : 无 * @author : peunzhang * @version : 2012.9.6 * @html : <!-- 圆角小提醒层 [[ --> <div class="prompt"> <span class="ico-layer-arrow-up"><!-- 上指示图标 --></span> <a href="#" class="ico-close-gold" title="封锁">封锁</a> <div class="prompt-main"> <div class="prompt-cnt"><a href="#">这里输入内容</a></div> </div> </div> <!-- 圆角小提醒层 ]] --> */ .ico-layer-arrow-up,.prompt-main,.prompt-cnt,.ico-close-gold{display:inline-block;background:url(https://img.tenpay.com/res/wallet_v2/global/img/global.png?v=20120913) no-repeat;_background:url(https://img.tenpay.com/res/wallet_v2/global/img/global_png8.png?v=20120913) no-repeat;vertical-align:middle;overflow:hidden;} .prompt{position:absolute;padding:5px;font-size:12px;line-height:12px;font-family:5B8B4F53;} .prompt .ico-layer-arrow-up{position:absolute;top:0;left:12px;background-position:-41px -27px;} .prompt .prompt-main{padding-left:7px;height:20px;background-position:-150px -501px;} .prompt .prompt-cnt{padding-right:18px;height:20px;line-height:20px;line-height:21px9;white-space:nowrap;vertical-align:top;background-position:right -501px;color:#7C6103;white-space:nowrap;} .prompt .prompt-cnt a{color:#7C6103;} .prompt .prompt-cnt a:hover{color:#0099FF;} .prompt .ico-close-gold{position:absolute;top:12px;right:12px;} 雪碧图的一角：
颠末不绝的测试，行使以下3种要领可以办理该bug 办理步伐1：把span元素替代div元素，span元素配置display:inline-block呈行块机关，具有自动紧缩的结果 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<div class="prompt"> <span class="ico-layer-arrow-up"><!-- 上指示图标 --></span> <a href="#" class="ico-close-gold" title="封锁">封锁</a> <span class="prompt-main"> <span class="prompt-cnt"><a href="#">这里输入内容</a></span> </span> </div> 办理步伐2：针对IE6赏识器，给最外层的div元素配置宽度：_width:1%，使得最外层的宽度自动紧缩 .prompt{_width:1%}
办理步伐3：针对IE6赏识器，触发块级元素的haslayout属性，并配置display:inline可使得块级属性泛起行块机关模式，具体可看《display:inline-block下的IE元素》 .prompt-main,.prompt-cnt{_zoom:1;_display:inline;}
模块开拓完成，实现了内容自动紧缩，按照现实的场景而选择最佳的行使要领，这里回收了第一种方案，利益是不写任何hack，弱点是可扩张性不佳。 本文来历：http://PeunZhang.cnblogs.com/ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
