文章介绍了min-height和min-width兼容多浏览器版本做法,有需要的同学可看看。min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例:

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

运行图如下:
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
先别高兴的太早,不要忘了已经让你深恶痛绝,但又不得不朝夕相对的ie6.0,它是这样回应你的:
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本 
没有办法,谁让国富民穷的国人口袋里没有钱呢?或许不应该这样说。应该说谁让我们无私的国人,把自己的口袋无偿的贡献给了国家了呢?我们升级不起ie浏览器。苦逼的国人!!!扯远了........问题总要解决的!穷人有穷人的活法。脑子突然冒出一个现象!
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
代码: 

复制代码代码如下:
<div style="border:5px solid #f00;height:120px;width:300px;padding:12px;">

最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</div> 当给容器一个高度的时候,标准浏览器是这样的处理的,如果没有设置overflow的情况下,内容会超出但容器的高度不会变!这时候,我们又回到了前面,如果要自适应高度的话,当然去掉height属性。有时候我们需要一个最小的高度占据一定的空间。所以引出min-height属性。但可悲的是ie6.0不支持!!可是同样的代码我们在ie6.0里测试结果是这样的:
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
真是让人意外!!在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>

可是结果让我们很是意外,所有浏览器里统统失效:min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
怎么回事?考,全罢工啦!!仔细琢磨,原来不是这么玩的。容器的高度默认情况下是由内容多少决定的,但宽度不是啊!默认情况下是继承了父容器的宽度。当然,前提是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均有效。
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
可万恶的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的用法,当宽度由内容决定的时候才起作用。多放点内容试试,是不是如我们所想内容超出的话,容器变大?min-height和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>

 min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
结果很严重,我们很失望。我们唯一思路也被隔断了!种么办?种么办?....."换行!!??"那我就让你不换行!!!

复制代码代码如下:
<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>
 
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
竟然可以了!加点内容!!!min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
竟然连上面的,超出浏览器宽度问题也解决了!试试其它浏览器。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>

 min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
加些内容:
 min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
依然可以,预期达到。 4 float:left 这种情况最常用。应该也行!上代码: 

复制代码代码如下:
<div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div>

 min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
同样加些内容:min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
预期达到!
标签:
min-height,min-width

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。