IE CSS Bug系列:IE6中Min-Height的解决办法

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@lenville 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

受影响的版本

这个bug影响:IE6

表现

min-height属性被忽略

教程发布时间

2009年7月17日 星期五 13:10:16

问题描述

IE不仅没有正确支持height属性,它甚至完全不识别min-height属性。幸运的是,另一个bug恰好能弥补这一缺陷,稍后再详细描述,我们先来看一下demo。
示例

I CAN HAS MIN-HEIGHT!

Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean

I CAN HAS MIN-HEIGHT!

 

HTML 代码:

CSS代码:

在这里没什么好多说的。我们有三个P段落,其中两个(#buggy和#biggie)的min-height属性都被设置为100px。在符合标准的浏览器中,#buggy元素的高度将会是100像素,因为里面的内容不像#biggie那么多,而且我们设置了最小高度(min-height)属性。在IE7以下版本中,#buggy和#normal元素看起来完全一样,因为min-height属性被完全忽略掉了。

 

解决办法

以下是针对上述bug的解决办法(按照解决方案的类型排序)

解决方案(条件注释解决方案)- 有副作用

方案提出时间

2009年7月17日 星期五 13:20:02

修正版本

全部受影响的

方案描述

I CAN HAS MIN-HEIGHT!

Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean

I CAN HAS MIN-HEIGHT!

HTML代码:

CSS代码:

条件注释

回想一下扩展高度(Expanding Height)bug,因为IE7以下版本都没有限制元素的高度,而是让它根据需要自动增高,我们可以借用这个bug来提供我们的最小高度(min-height)解决方案。

我们将会使用条件注释标注IE7以前的版本(请记住,IE7可以正确处理高度属性的哦)然后将我们赋给min-height的值同样赋给height属性。哇,问题解决了。

 

条件注释解决方案(CCS-Conditional Comments Solution)的副作用

副作用相对是细微的。受影响的浏览器处理height属性的方式跟符合标准的浏览器处理min-height属性的方式几乎一样。然而,还有一个例外是,如果overflow属性被添加到这个元素上,IE会隐藏或者滚动超出部分的内容。

解决方案(Javascript解决方案)

方案提出时间

2009年7月17日 星期五 13:31:20

修正版本

全部受影响的浏览器

方案描述
I CAN HAS MIN-HEIGHT!

Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean

I CAN HAS MIN-HEIGHT!

HTML代码:

CSS代码:

条件注释:

这一次,HTML标记和CSS代码跟原始demo相同,我增加了

仅仅为了演示overflow 已不再是CCS(Conditional Comments Solution)相关的问题。

成功的招数就是在条件注释里为height属性设定的专有表达式的值,当然,又是针对IE7以下的版本。通过这个方法,我们就可以在样式表里执行Javascript代码,然后把返回值赋给这个属性。

如果你不熟悉JS,那我就解释一下表达式expression()里面的代码都做了什么。首先,它获取匹配选择器(#buggy,#biggie)的相应元素的高度值,然后通过利用三元运算符我们将会选择即将赋给height属性的值(在CSS代码里)。三元运算符可以这样理解:

“布尔值(True 还是 False)” ? “值为True时返回这里的值” : “值为False时返回这里的值”

所以我们的JS代码的意思是:

“这个元素的高度是否小于等于100像素(px)” ? “如果是,把100px赋给height” : “如果不是把height设为auto”。

请牢记this.scrollHeight返回的height值单位是像素(pixels,写作px),如果你需要其它单位,可以用Javascript代码通过计算得到一个合适的单位,啊只不过这已经超出了这个教程的范围,如果需要请看这里。

或者你可以使用由DoxDesk提供的MinMax script,在IE下这个脚本对于min-width/max-width/min-height和max-height这些属性都提供了良好支持(而这些本来在IE7以下版本都是不支持的)。我保留了一份这个脚本的本地备份,以防DoxDesk的链接不再能够使用,你只需把<script type=”text/javascript” src=”minmax.js”></script>嵌入到你的页面的<head>标签里,然后脚本就会施展它的魔法。

收藏 1 评论

关于作者:Lenville

(新浪微博:@lenville) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 为什么不直接用CSS hack语法?
    _开头仅给ie6识别,
    *开头给IE6,7识别
    条件注释在IE10被抛弃了,会出错。

跳到底部
返回顶部