zoukankan      html  css  js  c++  java
  • 转载:牛魔王的世界观 »谈谈ie6不支持min-height与max-height的解决方法

    转载网址:http://www.niumowang.org/html-css/ie6-min-height/

    手里的项目还在继续,今天正好遇到了min-height的问题,干脆在这里记录下来。我是喜欢联想的人,所以在这里又倒腾出了ie6支持max-height,以及ie6同时支持min-height与max-height的方法。(注:本文主要介绍css写法,其他的用js或者jquery的方法就很多了

    如何让ie6支持min-height

    如果只是让ie6支持min-height倒也比较简单。一些朋友看过代码就能明白,主要是css hack方法,利用ie6支持或者不支持的符号来完成任务。

    方法一:

    <style type="text/css">
    .show{background:#ccc;min-height:100px;_height:100px;}
    </style>
    <div class="show">牛魔王的世界观测试御用文字!</div>

    方法二:

    <style type="text/css">
    .show{background:#ccc;height:auto!important;height:100px;min-height:100px; }
    </style>
    <div>牛魔王的世界观测试御用文字!</div>

    方法三:(不推荐)

    <style type="text/css">
    .show{background:#ccc;min-height:100px;_height:expression(this.scrollHeight < 100 ? "100px" : "auto");}
    </style>
    <div>牛魔王的世界观测试御用文字!</div>

    上面前两种方法原理都是一样的,让div块在ie6下高度固定为100px。第三种方法利用到了ie6的expression行为(主要是将css与js表达式结合起来),我是极力不推荐这种写法,expression会占用大量浏览器资源。我也曾经遇到过使用了expression导致页面很卡的现象。

    如何让ie6支持max-height

    一般max-height在实际应用中用到的比较少。在实战方面主要结合overflow来使用。如果让ie6支持max-height的方法同上面原理相同,加“_height:高度;”。由于浏览器会自动把超出部分的内容显示出来,所以这里如果想要达到超出部分隐藏的话可以加上“overflow:hidden;”,或者超出部分显示滚动条“overflow:auto;”

    如果让ie6同时实现min-height与max-height

    让ie6既支持min-height又实现max-height怎么办呢,你可能会说总不能写两个“height”吧。呵呵,是的即使写两个height浏览器也只会解析一个。
    下面我结合一个案例来说明这个问题:
    要求:用div+css实现,div容器内有多行内容,现在要求实现当高度小于100px的时候该容器最小高度为100px,当大于200px的时候显示下拉条。
    看到这个要求有些朋友不免头大,这个东西怎么不太好实现吧。你可能会想到我前面说过的expression,在css里面计算该容器的高度。

    是的,这样能够达到我们的要求。代码部分如下

    overflow:auto;/*超出部分显示滚动条*/
    _height: expression(
    this.scrollHeight < 100 ? "100px" :
    (this.scrollHeight > 200 ? "200px" : "auto");

    不过按照惯例这不是高潮,呵呵,因为我上面已经说过我是极力不推崇这种方式的。既然刚才不是高潮那么我肯定会有自己的主张。具体怎么办呢?

    可能是我上面说的有些误导了大家的思维,其实实现这种方式的写法比较是比较简单的。我们不一定非要采用max-height这个css样式来完成啊。我上面说的只是ie6实现它。废话不多说,看代码

    <style type="text/css">
    .contain{height:200px;overflow:auto;background:#eee;}
    .post{_height:100px;min-height:100px;background:#ccc;}
    </style>
    <div class="contain">
    <div class="post">
    牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>牛魔王的世界观御用测试文字!<br/>
    </div>
    </div>

    呵呵,看到这里是否有种顿悟或者被骗的感觉呢?方法其实很简单就是添加了一个外容器,根本没有用到max-height属性。ok,说完了。不多说,主要是告诫自己以及从事此行的朋友,实现一个效果方法有很多种,很多的思路。有时候换一个角度,你会发现更精彩的部分。

  • 相关阅读:
    单片机中的类型转换
    vs2013CCyusb报错(CyAPI.obj)
    c/c++ 去掉空格函数
    keil关于正点原子的sys.h工程报错修改
    【C语言】华软C语言程序设计复习
    c/c++中,clock函数的用法和作用
    vs mfc出现错误“MSB8301”解决办法
    vs出现“未将对象引用到实例的错误”
    keil uv5 代码格式化
    嵌入式软件面试
  • 原文地址:https://www.cnblogs.com/lraa/p/3152121.html
Copyright © 2011-2022 走看看