在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; width: 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>