min-height和min-width两个最小高度和最小宽度兼容多浏览器版本

文章介绍了min-height和min-width兼容多浏览器版本做法，有需要的同学可看看。min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说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>

上一篇：css span右对齐 css li标签中span日期靠右布局实现代码

下一篇：CSS伪类:before在元素之前 :after 在元素之后实例讲解

发表评论

共有条评论