css div自适应高度(兼容ie,firefox,ie8)

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:31 我要评论(0)

先看一个例子:

html:

111cn.net代码如下:

<ul>

<li></li>

<li></li>

</ul>

css:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

}

ul li {

width:100px;

height:100px;

float:left;

margin-right:10px;

background-color:#99cc00;

}

在各个浏览器中的效果一致:

可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是看不到的。当然要让它伸长也很简单,只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了html结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。

注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。

第一种方法:

ie 支持一个 css 属性 zoom, 这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50% 表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。

当定义了这个属性之后在 ie 浏览器里面就会自动适应高度了。当应用了这个属性之后,ie 就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 css:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

zoom:1; /* ie */

}

而非 ie 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:ie 和 非ie。

对于非 ie 浏览器需要用到一个伪类 :after (ie 浏览器不支持)。css 代码如下:

111cn.net代码如下:

ul:after {

content:".";

display:block;

clear:both;

height:0;

}

:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.”,然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。

我们看下在 firefox 下面的效果:

可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:”.” 。

这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。

好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的css代码

111cn.net代码如下:

ul {

margin:0;

padding:10px;

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...