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

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


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

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

用hack尽量不用。

代码如下:

<div>    最小高度</div>

经测试,预期达到。

我们想要min-width也达这样的效果。

先来测试一下:

<div>    最小宽度</div>

可是结果让我们很是意外,所有浏览器里统统失效:

全罢工啦!!仔细琢磨,原来不是这么玩的。容器的高度默认情况下是由内容多少决定的,但宽度不是啊!默认情况下是继承了父容器的宽度。当然,前提是display是block。

哦,原来是这么回事,我们得让容器的默认宽度是内容多少来决定。

由此我想到了几种情况:

1display:inline但有个问题是这样的话width就失效了,经测试min-width同样也失效,这种情况被pass掉了,海选啊!

2 于是乎我们想到display:inline-block属性;嗯这个应该没有问题吧!?动手吧

代码如下:

<div>    最小宽度& lt;/div>

经测试,firefox、chrome、ie8.0均有效。

可万恶的ie6还是不行啊!!而且出来个捣乱的,ie7也不行。别,仔细看看,原来ie6和ie7就没实现display:inline-block;
修改代码:

<div>    最小宽度</div>

先试试ie7,ok大功告成!再试ie6,依然“万恶”!!别急呀,至少我们明白了min-width的用法,当宽度由内容决定的时候才起作用。多放点内容试试,是不是如我们所想内容超出的话,容器变大?

嗯,果然是。但是有个小问题,就是当内容超过浏览器的宽度时,依然会换行。先不管它!先解决ie6.0的问题。

仔细琢磨一下,现在又回到当初的思路了,只有i6有问题。当初是怎么解决的?哦,ie6.0 的height本身就具备min-height的特性。那width是不是也如此呢?我们加个_width:220px试试

<div>    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>

结果很严重,我们很失望。我们唯一思路也被隔断了!

<div>    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>

竟然可以了!加点内容!!!

竟然连上面的,超出浏览器宽度问题也解决了!试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获!

3 position:absolute 嗯这个看起来也行。

<div>    最小宽度</div>

加些内容:

依然可以,预期达到。

4 float:left 这种情况最常用。应该也行!

上代码:

<div>    最小宽度</div>

同样加些内容:

预期达到!

  

爱华网本文地址 » http://www.aihuau.com/a/25101016/307434.html

更多阅读

教你安装360浏览器抢票插件和怎么抢票 火狐浏览器抢票插件

教你安装360浏览器抢票插件和怎么抢票——简介 过年回家买不到火车票是大家最苦恼的问题了,360浏览器推出的抢票功能就很好的解决大家这方面的问题,下面就和大家分享下怎么安装360浏览器抢票插件和怎么抢票。教你安装360浏览器抢票插

滴水观音的繁殖方法和养殖技巧方法 滴水观音怎样繁殖

滴水观音的繁殖方法和养殖技巧方法——简介滴水观音名字的由来是因为它在开的花非常像观音,而且在水分充足的情况下会从叶子的尖端向下滴水,虽然有这么美的名字,需要注意的是滴水观音的根茎是有毒的,所以在养殖过程中一定要注意。滴水观

发财树的养殖方法和注意事项 发财树摆放禁忌

发财树的养殖方法和注意事项——简介发财树的养殖方法和注意事项,特点:耐阴,耐旱要诀:防湿,防冻发财树的养殖方法和注意事项——工具/原料盆土水肥料发财树的养殖方法和注意事项——方法/步骤发财树的养殖方法和注意事项 1、一、环境的

教你区分春联的上下联和正确贴法 对联怎么区分上下联

教你区分春联的上下联和正确贴法——简介春节的时候每家每户都要张贴春联,去年的时候,我家就是我张贴的,结果上下联贴反了,闹了个大笑话。马上春节就要来了,可不能再犯同样的错误了。教你区分春联的上下联和正确贴法——工具/原料春联

怎样对IE浏览器的缓存进行忧化设置 如何清理ie浏览器缓存

怎样对IE浏览器的缓存进行忧化设置——简介 IE缓存是什么,IE缓存就是在上网时,临时保存在电脑中的临时文件,这些文件一般放在C盘的Internet缓存文件夹中,由于缓存的文件会非常多,有时可以达到几百M,甚至上G,占据C盘大量空间,也使C盘的运行速

声明:《兼容浏览器的min-height和min-width min width 兼容性》为网友滥情汉子分享!如侵犯到您的合法权益请联系我们删除