`
xiaoluode
  • 浏览: 14569 次
  • 来自: 深圳
社区版块
存档分类
最新评论

兼容浏览器的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>

 经测试,预期达到。

 


我们想要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>

 

  

结果很严重,我们很失望。我们唯一思路也被隔断了!种么办?种么办?.....&quot;换行!!??&quot;那我就让你不换行!!!

<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

 

 

 

 

  • 大小: 4.8 KB
  • 大小: 3.9 KB
  • 大小: 3 KB
  • 大小: 3 KB
  • 大小: 847 Bytes
  • 大小: 682 Bytes
  • 大小: 977 Bytes
  • 大小: 1.9 KB
  • 大小: 1.2 KB
分享到:
评论

相关推荐

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

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

    兼容IE6的min-width、min-height的简单方法

    IE6是一个非常老旧的浏览器版本,其对CSS的许多属性支持不全,比如本文提到的min-width和min-height属性。min-width属性可以设置元素的最小宽度,当浏览器窗口或者父元素的宽度小于设定值时,元素的宽度不会继续收缩...

    CSS中height和min-height的区别

    CSS(层叠样式表)是Web开发中用于控制网页样式的标准技术。其中,控制元素尺寸的属性包括height(高度)和min-...但是,要考虑到不同浏览器的支持情况,并采用一些兼容性技巧来处理不支持min-height的旧浏览器版本。

    IE 6不支持min-height或max-width等属性的完美解决方案

    请看geniusalien提供的完美解决方案: (geniusalien温馨提示:本文的min-height操作方式试用于min-width、max-width、max-height。一样按下面的解决方案进行!) 第一种方法:我们可以利用IE6不识别!important来...

    IE6不支持CSS中的min-width/height属性问题的解决方法

    尤其是对于min-width和min-height属性的支持问题,一直是前端开发者在进行跨浏览器兼容性处理时遇到的一大难题。这两个CSS属性原本是用于设定元素的最小宽度和最小高度的,确保网页元素在内容较少时也能够保持一定的...

    让IE6支持min-width和max-width的方法

    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...

    多种方法解决min-width 不兼容ie6的问题

    总之,处理 min-width 与 IE6 不兼容的问题需要结合多种技巧和方法,同时考虑到浏览器的特殊性与项目的技术要求。随着现代浏览器的发展以及网页标准的完善,我们有理由相信未来网页开发中此类问题将会得到缓解,...

    CSS属性探秘系列(五):min-width

    CSS中的min-width属性是一个重要的布局控制属性,用于确保网页中的元素不会因为容器尺寸缩小而...随着Web标准的发展和浏览器对CSS属性的支持越来越好,min-width等CSS属性正成为前端开发者手中控制页面布局的强大工具。

    让IE6支持min-width最小宽度

    描述中提到,虽然`min-width`、`min-height`、`max-width`和`max-height`等属性在CSS规范中早已存在,但它们在早期浏览器中的支持度并不高。IE6作为曾经广泛使用的浏览器,它的市场份额大,但缺乏对这些属性的支持,...

    css浏览器兼容问题大全

    4. **宽度和高度问题**:IE不支持`min-width`和`min-height`,但将其视为`width`和`height`。为兼容IE,可以使用条件注释或HTML5的特性选择器,如`html&gt;body #box { width: auto; height: auto; min-width: 80px; ...

    IE6支持max-width/height与min-width/height(完美解决方案)

    IE6作为一款老旧的浏览器,对CSS的支持存在诸多限制,尤其是对于CSS3中的新特性,例如max-width和max-height等,都不被IE6原生支持。尽管如此,开发者们依然找到了一些方法来模拟这些功能,以确保网页在IE6中也能有...

    css+div浏览器兼容技巧

    为解决此问题,可以为非IE浏览器设置`min-width`和`min-height`,同时为IE浏览器设置`width`和`height`。例如: ```css #box{ width: 80px; height: 35px; } html&gt;body #box{ width: auto; height: auto; ...

    css浏览器兼容性前端人员的必备

    IE浏览器不支持`min-width`和`min-height`属性。为了解决这个问题,可以使用条件注释来为IE提供特定的样式规则。 **示例**: ```css #box { width: 80px; height: 35px; } html &gt; body #box { width: auto; ...

    css浏览器兼容.docx

    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。解决方案是使用`width:auto; height:auto; min-width:80px; min-height:35px;`。 5. 页面的最小宽度 min-width是非常方便的CSS命令,...

Global site tag (gtag.js) - Google Analytics