项目中用到min-width，找了很多解决方案，都不管用，上蓝色经典问了些高人。版主推荐了一篇国外技术文章，觉得价值比较大，就翻译一下，收藏起来。英文比较差，如果翻译有错，还请指正。

介绍
min-width这个属性除了IE6，以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的css hack!
对网页设计人员来说，缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止，唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法（间接的JavaScript）.经过几个小时的尝试，我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度，但我相信这是一个很小的代价，一个非 JavaScript方法工程跨浏览器（甚至在Mac IE5）

方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法，对IE提供他独特的风格（我会解释一下教程）

The Css

body {  
 background:#fff url(rule.gif) 20px 0;  
 color:#000;  
 font-family:"trebuchet ms", "times new roman", times, serif;  
 margin:20px;  
 padding:0;  
}  
.width {  
 width:50%;  
 min-width:300px;  
 background:#fff;  
}  
 
.content {  
 border:1px solid #c00;  
 padding:5px;  
}  
 
.rule {  
 width:300px;  
 background:#c00;  
 color:#fff;  
 margin:1em 0;  
} 

body - general body styling

The (X)HTML

<div class="width"> 
  <div class="content"> 
    <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
    <p>This div has a min-width of 300px and a width of 50%.<br /> 
    The width can be any percentage and the min-width a px or em value.</p> 
  </div> 
</div> 
<div class="rule">this is 300px wide</div> 

Normal method demo 1

如果在任何一个浏览器中（除IE）尝试上面的例子，并且改变浏览器窗口的大小，外面的容器（的宽度）将会缩小直到宽度达到最小宽度300px，然后不管怎么缩小，容器将一直保持300px的固定宽度.相反，如果你在IE中尝试这个例子，容器将一直缩小，甚至小于300px的标志，并且只有等到文字不允许其再缩小的时候才停止.

步骤1

主要的思想是使用一个有左边界left-border宽度为min-width的div.主要的原理是一旦div的宽度到达0,div的边界通常不会收缩.为了确保其他所有浏览器忽略附加的样式，我们必须针对IE使用，具有一般的hack方式“* html”的CSS.我们将增加一个类为minwidth的附加div.

The CSS CODE

* html .minwidth {  
 border-left:300px solid #800;  
} 

     border-left:300px solid #800; - sets the left border to 300 pixel solid dark red so that it can be seen.

The (X)HTML 

<div class="width"> 
  <div class="minwidth"> 
    <div class="content"> 
      <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
      <p>This div has a min-width of 300px and a width of 50%.<br /> 
      The width can be any percentage and the min-width a px or em value.</p> 
    </div> 
  </div> 
</div> 
<div class="rule">this is 300px wide</div> 

步骤1的演示(Demo)

所有这些步骤唯IE可见.我们将看到其他的浏览器将正确执行CSS的min-width.上面的例子表明左侧暗红色边界定为300像素宽和文字在右侧的白色背景上.减少浏览器的窗口宽度会缩小文字的宽度到一个最小值，但是不会缩小边界。

步骤2

我们现在需要将文字向左移动300px以便它能占据边界宽度，像正常宽度一样.这个可以通过添加另外一个div（margin-left:-300px;）来完成.

The CSS

* html .container {  
 margin-left:-300px;  
} 

  margin-left:-300px; - set the left margin to -300 pixel so that the contents will move over the border area.

The (X)HTML

<div class="width"> 
  <div class="minwidth"> 
    <div class="container"> 
      <div class="content"> 
        <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
        <p>This div has a min-width of 300px and a width of 50%.<br /> 
        The width can be any percentage and the min-width a px or em value.</p> 
      </div> 
    </div> 
  </div> 
</div> 
<div class="rule">this is 300px wide</div> 

步骤2的演示(Demo)

这表明现在文字占据了暗红色边界区域,同白色区域一样拥有50%的宽度.但是如果改变窗口的大小,你会发现我们回到了起点,内容content依然与继续缩小直到超过300px.

这个的发生是因为IE的渲染BUG，造成了附加的div的'hasLayout'属性为false. (see Microsoft hasLayout property for further information).

步骤3

这里有很多种方法来重新触发'hasLayout'，但是最普通、最简单的方法是'Holy Hack'，就是给div一个(height:1px;)的属性.

The CSS

/*\*/ 
* html .minwidth, * html .container {  
 height: 1px;  
}  
/**/ 

在.minwidth和.container 2个div上应用这个CSS HACK.

围绕的字符 /*\*/........./**/ 是用来隐藏样式在 Macintosh  IE5，据我所知，这个功能没有问题.

步骤3的演示(Demo)

减小浏览器窗口现在会减少所有宽度，直到达到最小宽度然后停止在300px.但是这个会引发一个问题，就是那些占据红色边界区域的字符会消失在红色边界区域不见，只有出现在白色区域上方的文字才可见.

步骤4

Another problem and another solution. If I give the container div a relative position then the text will reappear in front of the dark red border.
The CSS

* html .container {  
 margin-left:-300px;  
 position:relative; /* ADDED */ 
} 

步骤4的演示(Demo)

经过上面的调整，我们已经使得所有的文字在50%的div中可见，并且已经实现了跨浏览器的min-width功能》

步骤5

剩下来的工作就是改变边界的颜色为白色一边内容区域div呈现白色背景.

The CSS

* html .minwidth {  
 border-left:300px solid #fff; /* CHANGED */ 
} 

步骤5的演示(Demo)

我们现在有一个完全有效的方法来在IE中模拟使用min-width，并且我们可以在这里完成，但是这里依然有个限制，那就是我们需要一个背景颜色来完成这个工作.这是因为IE没有border的'transparent'选项.

步骤6

如果我们需要有一个背景图片通过min-width div来显示，那么上述的方法将不适合.幸运的是，有一个替代方案，将解决这个问题，只需要一个额外的div来完成这个工作.如果，不使用左边界宽度来控制min-width的话，我们将使用左填充宽度取代，并且我们不需要为任何一个div制定颜色下面是CSS代码

.width {  
 width:50%;  
 min-width:300px; /* CHANGED TO REMOVE BACKGROUND COLOR */ 
}  
* html .minwidth {  
 padding-left:300px; /* CHANGED MARGIN TO PADDING */   
} 

步骤6的演示(Demo)

现在你可以看到背景图片通过div显示，但是，大家会发现，这种方法（当浏览器窗口缩小时）不会停止在最小宽度，因为IE将缩小填充padding宽度.

步骤7

这里有个附件div（class="layout"）用来防止padding的缩小.

The (X)HTML

<div class="width"> 
  <div class="minwidth"> 
    <div class="layout"> 
      <div class="container"> 
        <div class="content"> 
          <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
          <p>This div has a min-width of 300px and a width of 50%.<br /> 
          The width can be any percentage and the min-width a px or em value.</p> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
<div class="rule">this is 300px wide</div> 

附加的CSS将会添加到类为.layout 到hasLayout 列表中.

The CSS

/*\*/ 
* html .minwidth, * html .container, * html .content, * html .layout  {  
 height:1px;  
}  
/**/ 

步骤7的演示(Demo)

现在你会看到一个充分的、可用的IE min-width 演示，这个演示含有透明背景.

步骤8

另外一个可能的要求就是让所有的宽度容器在页面上居中.这个不算问题，而且可以使用普通的方法'text-align:center' for IE 并且 'margin:0 auto;' for non IE browers 对外层div.居中的div,一个含有背景颜色，一个含有透明背景在下面的例子中可以看到.

Example of centered divs

你会注意到我使用了.width {display: inline-block;} 在这个版本里面，来给外层的容器宽度hasLayout属性.这个是另外一个可替代方案来实现在IE中的hasLayout应用.

结论
我希望本教程是一种折衷的，并且您同意这一方法优于JavaScript或表达式（即使它使用了一些额外divs来完成的结果）。高兴的是，当Internet Explorer7今年晚些时候推出，它必须支持最小宽度;如果没有，当设计师们开始使用min-width来布局，这种方法的实现最小宽度在早期版本的Internet Explorer将变得更重要。

原文标题：How to Use CSS to Solve min-width Problems in Internet Explorer
原文作者：Stu Nicholls
原文出处：http://www.webreference.com/programming/min-width/

翻译者：Liupeng.us