在IE中使用最小宽度minwidth（CSS版）

在IE中使用最小宽度min-width（CSS版）

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得，所以如果你用IE将博客园的窗口宽度缩到足够小，所有的字都变在一列中。

常见的解决方法就是用javascript或IE的expressions。

在这里我来尝试用css来解决这个问题

假设我们需要一个min-width为300px的div

第一步

<div style="border-left: 300px solid #fff;height:1px"></div>

将左边框设为300px，并且边框的颜色和页面的背景色一样，高度设为1，否则这个div就看不见了

第二步
在上面的div中，加入下面的代码

<div style="margin-left: -300px;position: relative; height:1px;"></div>

定位方式设为 relative(对象不可层叠)，并把对象margin-left(左边的外补丁)设为-300px。
这样这个div就会回到原点，而不是从300px开始,

分析

因为border-left为300px,所以div最小也得有300px，间接实现了min-width的功能。
而由于margin-left为-300px且position:为relative，所以里面的文字不受border-left的影响

完整的代码如下

<div style="border: 1px solid red;  90%;">
 <div style="border-left: 300px solid #fff;height:1px;">
  <div style="margin-left: -300px;position: relative; height:1px;">
  宽度 90%, 最小宽度 300px;
  最小高度 300%
  </div>
 </div>
</div>