当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > IE6不支持CSS中的min-width/height属性问题的解决方法

CSS样式表
CSS样式表定义标签li前面样式
符合标准的div css制作的弹出菜单
CSS实现在文章每段后面加入带连接的隐藏文字
CSS:浏览器特定选择器介绍
WEB标准学习,认识两种网页声明的含义
CSS样式表中继承关系的空格与不空格
CSS框架的利与弊(下)
让广告代码不影响网页站打开速度
CSS教程:position 绝对定位的问题
标签增加CSS的overflow属性来清除浮动
跨浏览器的CSS固定定位
IE7对css选择器的改进
IE7新支持的CSS属性和属性选择符
CSS设计符合Web标准的网页表单的几个技巧
HTML网页中无刷新的更换CSS样式
CSS定义网页局部链接的技巧
关于学习DIV CSS的一些精妙问答
论web标准的网页制作和符合web标准的网站UI
CSS学习者:2008年不要作浮躁的人
学习CSS布局网页的一些实例

CSS样式表 中的 IE6不支持CSS中的min-width/height属性问题的解决方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 172 ::
收藏到网摘: n/a

这么好的语法,偏偏IE 6不支持,不过说不支持也不准确,事实上IE6本身在指定height与width的值时,就具有min-width和min-height的特性,只是如果单纯用height或width来指定,到了Firefox或IE 7时,又会把它当作是锁死的值,不会因內容增加而扩大元素的box。
解决的方法先看语法。
最小高度的解決

代码如下:

.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}

最小宽度的解決

代码如下:

.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}

里面的秘诀,是先利用较新的浏览器识别min-width/height,透过它来指定值,而IE6则是透过width/height取值。
不过这里有个冲突,就是新的浏览器也识别width/height,因此min-width/height会被width/height改写,解決的办法,就是中间那一行。
height: auto !important;(以及width: auto !important;)
由于它标示!important,所以下面那行height无法取代上面这一行,见解变成新的浏览器忽视掉第三行,而让高度不受第三行影响。
另外由于IE6不识别 min-height和 !important属性,所以它还是取第三行的语法,这样就可以相安无事,皆大欢喜。