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>
经测试,预期达到。
我们想要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>
竟然可以了!
超出浏览器宽度问题也解决了!试试其它浏览器。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>
预期达到!
文章出处:http://www.cnblogs.com/pigtail/archive/2012/06/28/2568646.html
相关推荐
文章介绍了min-height和min-width兼容多浏览器版本做法,有需要的同学可看看。min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例: 复制...
下面小编就为大家带来一篇兼容IE6的min-width、min-height的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
请看geniusalien提供的完美解决方案: (geniusalien温馨提示:本文的min-height操作方式试用于min-width、max-width、max-height。一样按下面的解决方案进行!) 第一种方法:我们可以利用IE6不识别!important来...
minmax_props= new Array( new Array(‘min-width’, ‘minWidth’), new Array(‘max-width’, ‘maxWidth’), new Array(‘min-height’,’minHeight’), new Array(‘max-height’,’maxHeight’) ); // Binding...
2 当设定min-height时,在标准浏览器中,表现为与IE6设定固定高度相同,即当内容高度小于min-height时,高度为min-height值,当内容高度大于min-height值时,此时div自动扩展。 在标准浏览器中设定min-height为100时...
min-width与min-height在css中是相当好用的语法,可以让HTML元素最少仍保持一定的宽和高,而需要时仍随着元素的內容增加宽和高。
把以上三行代码加到需要最小宽度的div里即可,原理是使用IE6本身的BUG(当块级元素内部的东西超出此块级元素的高度时,块级元素的高度会被撑开,也就是说IE6中的height属性本身就等同于min-height)。 方法二: 复制...
虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现,不过支持此属性的浏览器使用比率都不高,比如Firefox。
IE6支持最大宽度,IE6支持最小宽度以及让IE6支持min-width同时又支持max-width解决方案,代码很简洁功能很实用,有需求的朋友可以参考下哈,希望可以帮助到你
height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-...
目前,功能仅限于 [ min-width , max-width , min-device-width , max-device-width , min-height , max-height , min-device-height , max-device-height , orientation ] 媒体查询,使用,和and支持链接以构建复杂...
min-width:960px; clear:both; background:#666; text-align:center; color:#fff; } #infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;} #footer p{line-height:26px;} #...
<video id="my-video" style="width:100%;min-width:40vw;height:260px;" class="video-js" autoplay controls preload="auto" data-setup="{}"> </video>
使用videojs播放rtmp直播流,video.min.js还有videojs-contrib-hls.min.js配合使用 ...min-width:40vw;height:260px;" class="video-js" autoplay controls preload="auto" data-setup="{}"> </video>
10. IE6中min-height 最小高度不识别的解决办法 6 11. IE6中min-width 最小宽度不识别的解决办法 6 12. IE6中居中布局问题 7 13. IE6 Png图片不透明问题 7 14. 移除超级链接的虚线 7 15. 隐藏水平滚动条 7