三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

ie6下模拟min-width/height的新方法(No Hack)
作者:Neoxone    发表时间: 2009年01月20号,星期二     阅读:8,984 次

min/max-width/height这几个属性在ie6里面并不支持。
但是,min-height这个属性的效果却是我们经常会用到的,是以使用的时候就需要在ie6下模拟出此效果。
一般使用的方法如下(使用hack):


min-height:200px;
_height:20px;



min-height:200px;
width:auto !important;
width:200px;

虽然方法中使用了hack,但总的来说,还是蛮简洁方便的。

但并不是每个不被支持的属性都会如此幸运,像max-width/height这两个属性,css来模拟就无能为力了。

另外,剩下的一个属性:min-width;本来一直就没有考虑过要模拟这个。
今天有人在论坛上问起才决定试着模拟下。
如果想用之前模拟min-height的方法,在这里显然是不行的了。
在ie6中的height就相当于ie7及其他高级浏览器中的min-height,会适应着内容的高度而增长(在ie7等浏览器下,这种情况是会产生内容溢出,而不是撑开的)。
而width呢?由inline元素的组成的内容(img元素除外)遇到width边境就只有换行的命了。(这里,打下个埋伏。之后模拟min-width的方法就从这句话里面找。)

在我们开始模拟min-width的效果之前。
有必要先看一下的min-width到底是什么样的效果:
一般情况下,还真不易见到min-width的效果。
因为block元素默认的宽度是100%(当窗口全屏显示时候,一般min-width都不会超过这个100%的宽度
按照计算规则

1,The width is computed (without ‘min-width’ and ‘max-width’) following the rules under “Computing widths and margins” above.
2,If the computed value of ‘min-width’ is greater than the value of ‘max-width’, ‘max-width’ is set to the value of ‘min-width’.
3,If the computed width is greater than ‘max-width’, the rules above are applied again, but this time using the value of ‘max-width’ as the specified value for ‘width’.
4,If the computed width is smaller than ‘min-width’, the rules above are applied again, but this time using the value of ‘min-width’ as the specified value for ‘width’.

对于width>min-width这种情况,并不适应第4条规则,只能回到第一条规则,则宽度仍然为窗口宽度。

想看min-width的效果,我们可以缩小窗口到小于min-width。
或则,也可以考虑用下面的方法:
1,将min-width设置一个超过width的值,考虑到各种分辨率情况,需要设置的够大。如:2000px
2,将width设置一个小过min-width的值。如 :0
3,设置此元素为浮动。如:float:left;

三种法子中,看着比较顺眼的要属第2种方法了。(但是,这个法子却同后面使用的模拟min-width方法有冲突。)

放在ie6下测试,就可以看出ie6并不支持这个min-width属性。

我们要做的就是让ie6来支持这种min-width的效果。
之前说过:”由inline元素的组成的内容(img元素除外)遇到width边境就会换行”。
言外之意就是:如果是img元素和block元素的话,就不会换行,在ie7等浏览器下产生溢出,在ie6下则会撑开宽度。(回忆一下,我们是不是有过图片溢出div的经历呢。)
可见,ie6下内容撑开宽度和撑开高度两者的区别只在于:撑开高度的内容可以是任意元素,而撑开宽度则只能由block元素或img元素来担当(或许还有其他吧)。
所以,我们只需找一个block或img元素来,放在要设定min-width的元素内,给他一个固定宽度,那么这个宽度就是我们需要的min-width.
看代码:
(为了让外元素的宽度默认值不等于100%,我们使用float:left这种方法。)

试着增加内容文字。可以看出,当文字长度大于300px之后,div宽度将会增加,直至达到body边界面,才产生换行。

这种方法用不到hack,只需要一个空的无意义标签(装上 也不怕人家说咱)。
并且,删除min-width看看,在ie7,FF下是不是效果依旧。看来,这种方法把min-width属性可以省了。

回头看看,min-height属性的模拟是否也可以使用这种div填充,而不必动用hack呢?
看以下代码:

这里要提醒一下,当应用到复杂布局,这种方法还是慎用为妙。
其实使用有hack的那种方法其实没什么不好,不就是用了hack嘛。

———-
其实一直都觉得min-width没什么用处。刚才蓝色坛子里的朋友一提醒,发现,min-width可以在流体布局中,保证元素的最小宽度,而不至于影响布局美观。

那么,我们就做一个这样的流体布局来,演示下这个min-width的效果。

———-
很遗憾,发现并没有实现ie6下的min-width效果。一开始就没有理解min-width的用处,它是用来保证流体布局下文字流的最小宽度不影响布局美观的。

后来有人推荐一篇文章:http://www.webreference.com/programming/min-width/index.html
作者号称这种方法是a CSS only answer
但是没有给出完整demo,按照方法做了半天没做出来。
还好,有人最终实现了:http://bbs.blueidea.com/viewthread.php?tid=2908065&page=1&authorid=372134
是加了浮动之后实现的。

又是浮动,又是border,又是多层嵌套。。。看来min-width在ie6下还是放弃的好啊

标签: , ,

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(