如何实现IE6下块级元素的内容自动收缩
来源：程序员人生 发布时间：2013-11-12 08:09:04 阅读次数：2445次
近期在做提示层组件的开发，遇到了一个IE6常见的bug....想出了几个解决的办法，挺有意思的，这里分享给大家。
由于IE6浏览器中，display:inline-block只能触发IE的haslayout属性使得元素具有布局属性，当对div元素使用display:inline-block，div元素仍然为块状布局而占据一行。
那么如何在IE6下使得块级元素的内容自动收缩呢？开发圆角小提示层模块，让它来解答这个问题。
结构和样式：
/**
* @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;}
雪碧图的一角：
打开IE6浏览器，展现如下，宽度并不能自动收缩（这里浏览器窗口宽度被缩小到400px）
经过不断的测试，使用以下3种方法可以解决该bug
解决办法1：把span元素替换div元素，span元素设置display:inline-block呈行块布局，具有自动收缩的效果
<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%，使得最外层的宽度自动收缩
解决办法3：针对IE6浏览器，触发块级元素的haslayout属性，并设置display:inline可使得块级属性呈现行块布局模式，详细可看《display:inline-block下的IE元素》
.prompt-main,.prompt-cnt{_zoom:1;_display:inline;} 模块开发完成，实现了内容自动收缩，根据实际的场景而选择最佳的使用方法，这里采用了第一种方案，优点是不写任何hack，缺点是可扩张性不佳。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
