网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟大家分享下css3样式代码,经过时间完全兼容各大主流浏览器。

* 最小寬度 */
.min_width{min-width:300px;
   /* sets max-width for IE */
   _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
}

/* 最大寬度 */
.max_width{
   max-width:600px;
   /* sets max-width for IE */
   _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
}

/* 最小高度 */
.min_height{
   min-height:200px;
   /* sets min-height for IE */
   _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
}

/* 最大高度 */
.max_height{
   max-height:400px;
   /* sets max-height for IE */
   _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
}

/* 最大最小寬度 */
.min_and_max_width{
   min-width:300px;
   max-width:600px;
   /* sets min-width & max-width for IE */
   _width: expression(
      document.body.clientWidth < 300 ? "300px" :
        ( document.body.clientWidth > 600 ? "600px" : "auto")
   );
}

/* 最大最小高度 */
.min_and_max_height{
   min-height:200px;
   max-height:400px;
   /* sets min-height & max-height for IE */
   _height: expression(
      this.scrollHeight < 200 ? "200px" :
        ( this.scrollHeight > 400 ? "400px" : "auto")
   );
}

CSS控制div宽度最大宽度/高度和最小宽度/高度的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  3. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  5. css控制div等比高度

    在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...

  6. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  7. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  8. 前端学习笔记2017.6.12 CSS控制DIV

    前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...

  9. css控制父元素下的子元素自适应高度,且高度一致

    css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...

随机推荐

  1. quartz定时任务时间设置描述

    这些星号由左到右按顺序代表 : * * * * * * * 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 秒 是 0-59 , ...

  2. Spring中的AOP应用

    AOP被称为面向切面编程,AOP中的几个重要概念是: 1.切面.切面就是要实现的功能.切面通常是在多数方法中会用到的相同功能,如写日志. 2.连接点.连接点就是应用程序执行过程中插入切面的地点.如:方 ...

  3. 标准化命名CSS类,持续更新

    放链接.持续化更新,以后可能会用上.https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css

  4. Play framework(二)

    Play 2.0 的完整演示过程记录 http://www.oschina.net/translate/playframework-20-live-coding-script todolist代码

  5. 什么时候用position

    postion的情况有很多,fixed是固定,在我们需要把元素固定在某一个位置时使用 absolute和relative要配合使用,要把一个元素固定在另一个元素内某个位置时使用,外部元素为relati ...

  6. data-icon=""图片还可以是自定义的?

    自定义的图片怎么写啊? data-icon = "地址" 不对啊????? 不是写地址,而是设置css 比如 data-icon="mm" 那么在css中肯定有 ...

  7. gomoblie flappy 源码分析:游戏逻辑

    本文主要讨论游戏规则逻辑,具体绘制技术请参看相关文章: gomoblie flappy 源码分析:图片素材和大小的处理 http://www.cnblogs.com/ghj1976/p/5222289 ...

  8. 2013 ACM 通化邀请赛D.D-City 并查集

    点击打开链接 D.D-City Description Luxer is a really bad guy. He destroys everything he met. One day Luxer ...

  9. 《Code Complete》ch.8 防御式编程

    WHAT? 主要思想:子程序不应因传入参数错误而被破坏 WHY? 保护程序免遭非法输入的破坏 HOW? 断言 assert denominator != 0 : "denominator s ...

  10. android softinput 相关

    getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.Layo ...