项目中用到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

* background: #fff url(rule.gif) 20px 0; - shows the background grid (10 pixel and 100 pixel marks).
* color: #000; - sets the font color to black.
* font-family: "trebuchet ms", "times new roman", times, serif; - sets up the font choice.
* margin: 20px; - sets the margin to 20 pixels.
* padding: 0; - sets the padding to zero.

.width - the outer div that controls the width and min-width for browsers that understand this (or just the width for Internet Explorer).
* width: 50%; - the preferred width.
* min-width: 300px; - the minimum width allowed.
* background: #fff; - sets the background color to white.

.content - The container for the content in which you can add a border and/or padding while not affecting the width and min-width.
* border: 1px solid #c00; - adds a red 1 pixel solid border.
* padding: 5px; - sets the padding to 5 pixels.

.rule - Includes a rule line to show when min-width has been reached.
* width: 300px; - sets the width to 300 pixels.
* background: #c00; - makes the background dark red.
* color: #fff; - makes the text color white.
* margin: 1em 0; - adds a top and bottom margin of 1em.

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将变得更重要。

I hope that this tutorial was relatively painless and that you agree that this method is superior to JavaScript or expressions (even though it usesa few extra divs to accomplish the results). Hopefully, when Internet Explorer 7 is released later this year it will have support for min-width; if itdoes this method of achieving min-width in earlier versions of Internet Explorer will become more relevant as web designers start to use it with their layouts

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

翻译者:Liupeng.us