文档章节

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

波利beryl
 波利beryl
发布于 2014/11/11 09:39
字数 1549
阅读 82
收藏 5

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

转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/

先说说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>

 

同样加些内容:

预期达到!

我能想到就这几种情况,当然里面有分析不到位的地方,请不吝指正。有些浏览器,没有测,测试完给个结果,不行的话,再想办法。

本文转载自:

波利beryl
粉丝 21
博文 30
码字总数 5582
作品 0
成都
私信 提问
web前端开发中浏览器兼容问题(一)

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。通俗的讲,就是使用不同的浏览器(Firefox、Chrome、IE6...

博为峰教研组
2016/11/28
15
0
min-width最小宽度与max-width最大宽度

一、实际应用说明 最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以...

乱世中的单纯
2016/01/18
87
0
让footer固定在页面(视口)底部

让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现,没有令人讨厌的hacks。所以这就能在...

思考中
09/29
0
0
CSS Hack 完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有H...

alexian
2010/10/28
102
0
ie678,FF,chrome的css兼容性

参考:http://www.liuzp.com/css/15.html css的兼容性一般都是前端初学者面临的一个头疼的问题,难免写出来的css在各个浏览器下的效果均有不同,于是乎各种css hack写法出来了,其实在一个规...

messud4312
2014/12/25
177
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部