最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > Html/css> 如何实现IE6下块级元素的内容自动收缩

如何实现IE6下块级元素的内容自动收缩

文章作者:网友投稿 发布时间:2012-09-19 16:10:37 来源:网络

近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家。 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得

近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家。 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得元素具有布局属性,当对div元素使用display:inline-block,div元素仍然为块状布局而占据一行。 那么如何在IE6下使得块级元素的内容自动收缩呢?开发圆角小提示层模块,让它来解答这个问题。 结构和样式: Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] /** * @name : prompt * @explain : 圆角小提示层 * @type : 基类 * @dependent : 无 * @author : peunzhang * @version : 2012.9.6 * @html : */ .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:\5B8B\4F53;} .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:21px\9;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呈行块布局,具有自动收缩的效果 Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] 解决办法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/

上一篇: display:inline-block下的IE元素

下一篇: CSS 滤镜 -webkit-filter 的介绍和使用

共有0条评论网友评论