博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV+CSS兼容解决DIV最大宽度和最小宽度问题
阅读量:5055 次
发布时间:2019-06-12

本文共 1478 字,大约阅读时间需要 4 分钟。

在制作网页中,我们经常会碰到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等浏览器下的解决最小高度问题,最大高度就没有实践过了,呵呵。

分享到:

转载于:https://www.cnblogs.com/hnyei/archive/2011/09/19/2181367.html

你可能感兴趣的文章
panorama控件平滑跳转到指定的item
查看>>
maven settings.xml linux
查看>>
四. Jmeter--JDBC 请求
查看>>
USACO5.4-Character Recognition
查看>>
mysql中的多行查询结果合并成一个
查看>>
python 日历(calendar)模块
查看>>
Django 视图系统(views)
查看>>
log4j日志文件名与行号显示乱码? 问号? 参数问号? 日志问号?【转】【补】
查看>>
STM32库函数编程学习心得:assert_param的应用
查看>>
【web必知必会】—— 图解HTTP(下)
查看>>
JDK并发包常用的知识图
查看>>
不相交集类应用:迷宫生成
查看>>
(转载)C中实参与形参的“值传递”只能“单向传送”(透彻的理解)
查看>>
js中的原型继承
查看>>
this关键字制定对象的属性
查看>>
js对象取值的两种方法:
查看>>
java抽象类与接口的区别及用法
查看>>
我收藏的开源项目
查看>>
Springmvc 的post请求的json格式参数
查看>>
如何理解Robot Framework
查看>>