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

CSS样式表
DIV和CSS排版中制作细线条的方法小结
在解决ul居中问题时想到的几点
网页编辑中CSS样式表技巧总结
一个老外弄的Clearing floats(清除浮动的方法)
常用的DIV+CSS的基本框架结构但不推荐都放一个div里
无js5款纯div+css制作的弹出菜单标准
超强推荐CSS打造经典鼠标触发显示选项
CSS网页布局入门教程5:二列宽度自适应
CSS网页布局入门教程6:左列固定,右列宽度自适应
CSS网页布局入门教程7:二列固定宽度居中
CSS网页布局入门教程9:用CSS设计网站导航——横向导航
CSS网页布局入门教程10:带当前标识的标签式横向导航
CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
CSS网页布局入门教程12:纵向导航菜单
CSS网页布局入门教程13:下拉及多级弹出式菜单
CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
解读css发展历史
让用户自己控制网页字体的大小的css书写方法
CSS注释、命名、继承性、样式排序等CSS技巧的小结
CSS标签切换代码实例教程 比较漂亮

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 218 ::
收藏到网摘: 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属性,所以它还是取第三行的语法,这样就可以相安无事,皆大欢喜。