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

简介:

在制作网页中,我们经常会碰到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,这个写法就失败了。所以,需要换一种方法: 
 #mycss {
 width:100%; 
 max-width:500px;
 width:expression_r(document.body.clientWidth > 500? "500px": "auto" ); }

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

   我们设置了容器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,也是一样的:
 最小:
 #mycss {
 
min-width: 333px;
 width: expression_r( document.body.clientWidth < 334 ? "333px" : "auto" );
 
}

 最大高度:

 #mycss {
 
max-height: 333px;

 height: expression_r( this.scrollHeight > 332 ? "333px" : "auto" )
 
}
 最小高度:

 #mycss {

 min-height: 333px;

 height: expression_r( this.scrollHeight < 334 ? "333px" : "auto" );
 }

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

 #a {height:auto !important; min-height:400px;}
 这个样式可以在IE5.5,IE6,IE7以及FF,Safari等浏览器下的解决最小高度问题,最大高度就没有实践过了,呵呵。


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181367.html,如需转载请自行联系原作者

相关文章
N..
|
20天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
1月前
|
前端开发
CSS关于默认宽度
CSS关于默认宽度
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
34 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
19 0
|
2月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
26 1
|
4月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
57 0
|
4月前
|
存储 前端开发
CSS3媒体查询实现不同宽度的下不同内容的展示
CSS3媒体查询实现不同宽度的下不同内容的展示
37 0
|
4月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
|
4月前
|
前端开发
CSS div 水平排列
CSS div 水平排列
|
5月前
|
前端开发
CSS写一个缺角的div
CSS写一个缺角的div
28 1