兼容浏览器的min-height和min-width

min-height和min-width这两个最小高度和最小宽度的容器属性相信你们并不陌生。

转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/

先说说min-height。这个看起来很容易。

看下面试例：

<div style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">
    最小高度</div>

运行图以下：

先别高兴的太早，不要忘了已经让你深恶痛绝，但又不得不朝夕相对的ie6.0，它是这样回应你的：

 

没有办法，谁让国富民穷的国人口袋里没有钱呢？或许不该该这样说。应该说谁让咱们无私的国人，把本身的口袋无偿的贡献给了国家了呢？

咱们升级不起ie浏览器。苦逼的国人！！！

扯远了........

问题总要解决的！穷人有穷人的活法。

脑子忽然冒出一个现象！

代码：

<div style="border:5px solid #f00;height:120px;width:300px;padding:12px;">
    最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</div>

 当给容器一个高度的时候，标准浏览器是这样的处理的，若是没有设置overflow的状况下，内容会超出但容器的高度不会变！这时候，咱们又回到了前面，若是要自适应高度的话，固然去掉height属性。有时候咱们须要一个最小的高度占据必定的空间。因此引出min-height属性。但可悲的是ie6.0不支持！！

但是一样的代码咱们在ie6.0里测试结果是这样的：

真是让人意外！！在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>

但是结果让咱们非常意外，全部浏览器里通通失效：

怎么回事？考，全罢工啦！！仔细琢磨，原来不是这么玩的。容器的高度默认状况下是由内容多少决定的，但宽度不是啊！默认状况下是继承了父容器的宽度。固然，前提是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均有效。

可万恶的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的用法，当宽度由内容决定的时候才起做用。多放点内容试试，是否是如咱们所想内容超出的话，容器变大？

嗯，果真是。可是有个小问题，就是当内容超过浏览器的宽度时，依然会换行。先无论它！先解决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>

 

结果很严重，咱们很失望。咱们惟一思路也被隔断了！种么办？种么办？....."换行！！？？"那我就让你不换行！！！

<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>

 

居然能够了！加点内容！！！

居然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie七、ie八、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>

 

一样加些内容：

预期达到！

我能想到就这几种状况，固然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。