深圳金猫标语
网站首页 > 建站百科 > 网站建设 > 解决IE6不支持min-width最小宽度的BUG


解决IE6不支持min-width最小宽度的BUG

来源: 深圳网站建设   点击次数:  更新时间:2013-09-30
虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现,IE8,FF,GG等大多浏览器都支持,不过支持此属性的浏览器使用比率都不高,比如Firefox。可浏览器使用率占最高的ie6偏偏不支持,虽然后来出场的ie7已经开始支持此属性。不过ie6也快被淘汰了,但是有时候客户就要求支持ie6,因为ie6还是有大部人在使用,客户不能忽略这分部的市场份额。 
特别是在流动布局的使用下,特别会用到min-width、min-height、max-width、max-height这些属性,以下是一种非常方便就可以实现在ie6显示min-width、min-height、max-width、max-height同等效果的方法,在此与大家一同分享。
闲话少说,上源码: 
触发并利用IE6-layout的怪异特性,css实现: 


CSS Expression 
——相信许多人在用这个方法实现容器最小宽度时都时常会被莫名其妙的死机所困扰,最后往往无果而终。 
这里特别需要指出的是两点: 
1. IE6-的标准模式下和quirk模式下代表视口的元素是不一样的,前者为,后者则为; 
2. IE6-在以上两种不同的模式下,其对包含内容溢出时的不同表现形式,从而导致了赋值判断上的死循环。解释起来有些啰嗦,自己实践一下吧。 
CSS Expression实现最小宽度源码: 


ie6-下,容器实现模拟min-width效果。请任意改变浏览器窗口大小,再点击按钮“查看宽度”。



以上两种解决方法在IE6-的标准模式下和quirk模式下都可实现,IE Expression在这个应用中也未发现CPU效率问题。 
可浏览器使用率占最高的ie6偏偏不支持,虽然后来出场的ie7已经开始支持此属性。不过就用户体验的角度来说多浏览器支持也是很重要的,更何况就目前来说ie6的占有率还是最高的。 
特别是在流动布局的使用下,特别会用到min-width、min-height、max-width、max-height这些属性,以下是一种非常方便就可以实现在ie6显示min-width、min-height、max-width、max-height同等效果的方法,在此与大家一同分享。 
min-width:700px; 
width:expression((documentElement.clientWidth < 700) ? "700px" : "auto" ); 




金猫数据最后总结:
解决IE6不支持min-width最小宽度的BUG,用这段CSS样式:
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":""); 
解决IE7不支持min-width最小宽度的BUG,用这段CSS样式:
width:expression((documentElement.clientWidth < 700) ? "700px" : "auto" ); 


更多

上一篇:精简CSS代码达到站内优化的效果
下一篇:表格中的td通过js来显示和隐藏,解决在谷歌中colspan不兼容性

建站百科
最新上线网站
最新动态
官方微博
联系方式
电 话:13715363967
邮 箱:jm3q@jm3q.com
网 址:www.jm3q.com
地 址:深圳市龙华区龙华街道油松科技大厦B栋419

客户服务
售前咨询
QQ:376797323
网站备案
QQ:362226714
技术支持
QQ:2303230985
投诉建议
QQ:479277584
电话咨询
0755-83958156
周一至周五
9:00至18:00点
微客服
扫一扫
回到顶部