在IE6环境下使用min-width的方法

80酷酷网    80kuku.com

   min-width默认是不被IE6支持的,不清楚IE7的情况,在FF中支持很好,而且这也是一个非常有用的属性。

既然IE6默认不支持,我们肯定就要使用一些技巧来至少表面上看来是支持的。

思路:3个div相对定位嵌套,通过border-left,和margin-left取负值的办法,实现最小宽度为border-left的值。

1,定义此width宽度为90%,min-width为400px;rule为400px的盒子做对比,此时用FF能看到我们的预期效果,在IE下不行:
.width { width:90%; min-width:400px; border:1px solid #aaa;}
.rule { width:400px; background:#c00; border:1px solid #c00; color:#fff; margin:10px 0; text-align:center; padding:5px 0;}<div class="width">
 内容填充内容填充内容填充内容填充内容填充内容填充内容填充
</div>
<div class="rule">这是400px宽</div>
效果演示:

2,在width内嵌套了一层minwidth,定义border-left为400px,同时相对定位,看到左边框空白的效果,留出我们需要的位置。
.width { width:90%; min-width:400px; border:1px solid #aaa;}
.rule { width:400px; background:#c00; border:1px solid #c00; color:#fff; margin:10px 0; text-align:center; padding:5px 0;}
* html .minwidth { border-left:400px solid #fff; position:relative; float:left; z-index:1;}<div class="width">
 <div class="minwidth">内容填充内容填充内容填充内容填充内容填充内容填充</div>
</div>
<div class="rule">这是400px宽</div>
效果演示:

3,在minwidth内再嵌套一层container,定义负左边距等于minwidth层的border-left值,同时相对定位,完成效果。
.width { width:90%; min-width:400px; border:1px solid #aaa;}
.rule { width:400px; background:#c00; border:1px solid #c00; color:#fff; margin:10px 0; text-align:center; padding:5px 0;}
* html .minwidth { border-left:400px solid #fff; position:relative; float:left; z-index:1;}
* html .container { margin-left:-400px; position:relative; float:left; z-index:2; padding:3px;}<div class="width">
 <div class="minwidth">
 <div class="container">
 最内层必须要有内容填充,最内层必须要有内容填充,最内层必须要有内容填充,最内层必须要有内容填充,最内层必须要有内容填充。
 </div>
 </div>
</div>
<div class="rule">这是400px宽</div>
效果演示:

这又是一个负边距例子,我们不难理解:当container宽超过400px时,container右边距和minwidth一样自动延伸;当 container宽不超过400px时,container右边距等于minwidth左边距,也就是说container的宽就是minwidth的 border-left,只不过浮动在上边而已。

提示:* html .minwidth的写法是IE6专用(IE5未知,有兴趣的测试),可以使用其他hack手段。

基本思路而已,如果需要提高兼容性,可在此基础扩展。个人认为实用有限,因为使用了浮动,不过在某些场合表现出来还是蛮神奇的。

Referrence
How to Use to Solve min-width Problems in Internet Explorer

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: