在IE6环境下运用min-width的方法
日期：2013-10-12 浏览次数：21239 次
min-width默认是不被IE6支持的，不清楚IE7的情况，在FF中支持很好，而且这也是一个非常有用的属性。
既然IE6默认不支持，我们肯定就要使用一些技巧来至少表面上看来是支持的。
思路：3个div绝对定位嵌套，通过border-left，和margin-left取负值的办法，实现最小宽度为border-left的值。
1，定义此width宽度为90%，min-width为400px；rule为400px的盒子做对比，此时用FF能看到我们的预期效果，在IE下不行：
效果演示：http://www.rexsong.com/blog/attachments/200512/13_202952_minwidth1.htm
2，在width内嵌套了一层minwidth，定义border-left为400px，同时绝对定位，看到左边框空白的效果，留出我们需求的位置。
效果演示：http://www.rexsong.com/blog/attachments/200512/13_203000_minwidth2.htm
3，在minwidth内再嵌套一层container，定义负左边距等于minwidth层的border-left值，同时绝对定位，完成效果。
效果演示：http://www.rexsong.com/blog/attachments/200512/13_203009_minwidth3.htm
这又是一个负边距例子，我们不难理解：当container宽超过400px时，container左边距和minwidth一样自动延伸；当 container宽不超过400px时，container左边距等于minwidth左边距，也就是说container的宽就是minwidth的 border-left，只不过浮动在上边而已。
提示：* html .minwidth的写法是IE6公用（IE5未知，有兴味的测试），可以使用其他hack手段。
基本思路而已，如果需求提高兼容性，可在此基础扩展。团体认为实用无限，由于使用了浮动，不过在某些场合表现出来还是蛮神奇的。
Referrence
How to Use CSS to Solve min-width Problems in Internet Explorer http://www.webreference.com/programming/min-width/
既然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;}
.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>
内容填充内容填充内容填充内容填充内容填充内容填充内容填充
</div>
<div class="rule">这是400px宽</div>
效果演示：http://www.rexsong.com/blog/attachments/200512/13_202952_minwidth1.htm
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;}
.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>
<div class="minwidth">内容填充内容填充内容填充内容填充内容填充内容填充</div>
</div>
<div class="rule">这是400px宽</div>
效果演示：http://www.rexsong.com/blog/attachments/200512/13_203000_minwidth2.htm
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;}
.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>
<div class="minwidth">
<div class="container">
最内层必需要有内容填充，最内层必需要有内容填充，最内层必需要有内容填充，最内层必需要有内容填充，最内层必需要有内容填充。
</div>
</div>
</div>
<div class="rule">这是400px宽</div>
效果演示：http://www.rexsong.com/blog/attachments/200512/13_203009_minwidth3.htm
这又是一个负边距例子，我们不难理解：当container宽超过400px时，container左边距和minwidth一样自动延伸；当 container宽不超过400px时，container左边距等于minwidth左边距，也就是说container的宽就是minwidth的 border-left，只不过浮动在上边而已。
提示：* html .minwidth的写法是IE6公用（IE5未知，有兴味的测试），可以使用其他hack手段。
基本思路而已，如果需求提高兼容性，可在此基础扩展。团体认为实用无限，由于使用了浮动，不过在某些场合表现出来还是蛮神奇的。
Referrence
How to Use CSS to Solve min-width Problems in Internet Explorer http://www.webreference.com/programming/min-width/
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
