DIV+CSS兼容解决DIV最大宽度和最小宽度问题

huige728

①最小宽度IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用，特别是对于100%宽度的可变模板来说，因为他告诉浏览器停止收缩。
对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如：

                    

1. .container {min-width:300px;float:left;height:30px;}

复制代码

要让这些在IE6下起作用的话你要添加额外的努力！你需要创建两个DIV，一个包含着另一个。

                    

1. 
   
2.                     <div class=”container”>
   
3.                            <div class=”holder”>Content</div>
   
4.                     </div>

复制代码

然后你需要设置外面层的min-width：

                 

1. .container {min-width:300px;}

复制代码

现在又要IE hack起作用了，你需要写下以下代码：

                  

1. 
   
2.                    * html .container {border-right: 300px solid #FFF;float:left;height:30px;}
   
3.                    * html .holder {display: inline-block;position: relative;margin-right: -300px;float:left;height:30px;}

复制代码

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时，这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

  ===================================================================================   
      ②在制作网页中，我们经常会碰到min/max-width,min/max-height在IE6底下是无效的，这也是web设计师最头疼的问题之一，以下的方法可以解决这些难题，并且比较简约。当然，如果你还有更好的方法，希望能在主页留言给我：
<div style="max-width:250px;">这段文字内容,ax /min 在ie7 + 和firfox,safari,opera浏览器下均支持，最宽值为250px</div>
不过IE6无法认读这个属性，还好IE它支持自己javascript的属性表达,例如：
div{width:expression_r(250+"px")} 和 div{widt:250px}在IE 的认读中都是一致的！但如果有的用户在浏览器中禁用javascript，这个写法就失败了。所以，需要换一种方法：

1. #mycss {
   
2. width:100%;
   
3. max-width:500px;
   
4. width:expression_r(document.body.clientWidth > 500? "500px": "auto" ); }
   

复制代码

或是：

1. #mycss {
   
2. max-width: 33em;
   
3. width: expression_r(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
   
4. }  

复制代码

   我们设置了容器mycss的宽度为：width:100%;　其实这是一句废话，因为DIV是块元素，默认的宽度就是父级元素的宽度。此例中div宽度，若不进行声明则等同于body的宽度。
我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。
　　面对没有效果的IE，我们应用expression_r嵌入脚本，声明了当宽度大于500px的时候，宽度就等于500px。

parseInt(document.body.currentStyle.fontSize)?"33em":"auto" 如果这个实际宽度大于 (500/12）当前字体的尺寸，则设置页面的宽度为 33em。

同样，对于最小的宽度，和ax/min-hight，也是一样的：
最小：

1. #mycss {
   
2. min-width: 333px;
   
3. width: expression_r( document.body.clientWidth < 334 ? "333px" : "auto" );
   
4. }
   

复制代码

最大高度：

1. 
   
2. #mycss {
   
3. max-height: 333px;
   
4. 
   
5. height: expression_r( this.scrollHeight > 332 ? "333px" : "auto" )

复制代码

}
最小高度：

1. 
   
2. #mycss {
   
3. min-height: 333px;
   
4. height: expression_r( this.scrollHeight < 334 ? "333px" : "auto" );
   
5. }

复制代码

另外还有一种简单的方法：

1. #a {height:auto !important; min-height:400px;}

复制代码

这个样式可以在IE5.5，IE6，IE7以及FF，Safari等浏览器下的解决最小高度问题，最大高度就没有实践过了，呵呵。