|
|
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生,本文介绍了min-height和min-width兼容多浏览器版本做法，有需要的同学可看看,先说说min-height这个看起来很容易
文章介绍了min-height和min-width兼容多浏览器版本做法，有需要的同学可看看。min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例：
复制代码代码如下:
<div style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">最小高度</div>
运行图如下：
2012121811240539.jpg
先别高兴的太早，不要忘了已经让你深恶痛绝，但又不得不朝夕相对的ie6.0，它是这样回应你的：
2012121811240540.jpg
没有办法，谁让国富民穷的国人口袋里没有钱呢？或许不应该这样说。应该说谁让我们无私的国人，把自己的口袋无偿的贡献给了国家了呢？我们升级不起ie浏览器。苦逼的国人！！！扯远了........问题总要解决的！穷人有穷人的活法。脑子突然冒出一个现象！
2012121811240541.jpg
代码：
复制代码代码如下:
<div style="border:5px solid #f00;height:120px;width:300px;padding:12px;">
最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</div> 当给容器一个高度的时候，标准浏览器是这样的处理的，如果没有设置overflow的情况下，内容会超出但容器的高度不会变！这时候，我们又回到了前面，如果要自适应高度的话，当然去掉height属性。有时候我们需要一个最小的高度占据一定的空间。所以引出min-height属性。但可悲的是ie6.0不支持！！可是同样的代码我们在ie6.0里测试结果是这样的：
2012121811240542.jpg
真是让人意外！！在ie6里面，内容超出高度height的时候，height竟然失效了！！这不正是min-height的所要达到的效果吗？于是乎，我们不得不对ie6.0采用hack (_height:120px)技术。这里我说“不得不”是因为我极度讨厌用hack。个中滋味自己体会，我的原则是，能不用hack尽量不用。代码如下：
复制代码代码如下:
<div style="border:5px solid #f00;min-height:120px;_height:120px;width:300px;padding:12px;">最小高度</div>
经测试，预期达到。 路终于是走了一半了，显然，我们不满足于此，一颗不满足的心才能收获更多！在技术的道路上不防贪婪些！！我们想要min-width也达这样的效果。先来测试一下：
复制代码代码如下:
<div style="border:5px solid #f00;min-width:120px;;padding:12px;">最小宽度</div>
可是结果让我们很是意外，所有浏览器里统统失效：
2012121811240543.jpg
怎么回事？考，全罢工啦！！仔细琢磨，原来不是这么玩的。容器的高度默认情况下是由内容多少决定的，但宽度不是啊！默认情况下是继承了父容器的宽度。当然，前提是display是block。哦，原来是这么回事，我们得让容器的默认宽度是内容多少来决定。由此我想到了几种情况：1 display:inline 但有个问题是这样的话width就失效了,经测试min-width同样也失效，这种情况被pass掉了，海选啊！！；2 于是乎我们想到display:inline-block属性；嗯这个应该没有问题吧！？动手吧代码如下：
复制代码代码如下:
<div style="border:5px solid #f00;display:inline-block;min-width:220px;;padding:12px;">最小宽度</div>
经测试，firefox、chrome、ie8.0均有效。
2012121811240544.jpg
可万恶的ie6还是不行啊！！而且出来个捣乱的，ie7也不行。别，仔细看看，原来ie6和ie7就没实现display:inline-block;
修改代码：
复制代码代码如下:
<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;;padding:12px;">最小宽度</div>
先试试ie7，ok大功告成！再试ie6，依然“万恶”！！别急呀，至少我们明白了min-width的用法，当宽度由内容决定的时候才起作用。多放点内容试试，是不是如我们所想内容超出的话，容器变大？
2012121811240545.jpg
嗯，果然是。但是有个小问题，就是当内容超过浏览器的宽度时，依然会换行。先不管它！先解决ie6.0的问题。仔细琢磨一下，现在又回到当初的思路了，只有i6有问题。当初是怎么解决的？哦，ie6.0 的height本身就具备min-height 的特性。那width是不是也如此呢？我们加个_width:220px试试
复制代码代码如下:
<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>
2012121811240546.jpg
结果很严重，我们很失望。我们唯一思路也被隔断了！种么办？种么办？....."换行！！？？"那我就让你不换行！！！
复制代码代码如下:
<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>
竟然可以了！加点内容！！！
2012121811240547.jpg
竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！3 position:absolute 嗯这个看起来也行。
复制代码代码如下:
<div style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div>
加些内容：
依然可以，预期达到。 4 float:left 这种情况最常用。应该也行！上代码：
复制代码代码如下:
<div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div>
同样加些内容：
预期达到！ |
|
发表于 2012-12-18 11:24:39
