网页制作中经常要控制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. Python之几个技巧特点

    今天偶然看到一篇文章<你可能不知道的30个Python语言的提点技巧>,虽然做python有几年了,但中间还是好多不知道或没想到,特在这里做下摘抄. 原文地址: http://soft.c ...

  2. C#实现程序自重启

    方法1: System.Diagnostics.Process.Start(System.Reflection.Assembly.GetExecutingAssembly().Location); / ...

  3. BC水题--The Factor(质因分解)

    网址:http://acm.hdu.edu.cn/showproblem.php?pid=5428 roblem Description There is a sequence of n positi ...

  4. java中的==和!=

    java中一般很少用到==和!=,除了用于和null比较,如: if(null==o){ } //或者 if(null!=o){ } 其他地方比较一律用equals(); 建议:写完代码后在整个项目中 ...

  5. 11-UIView与核心动画对比

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. 01-Quartz2D介绍

    01-PPT介绍 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !impo ...

  7. 剑指Offer:面试题8——旋转数组的最小值(java实现)

    题目描述: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入 一个递增排序的数组的一个旋转 输出 旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的 ...

  8. 下一代大数据系统和4S标准

    大数据行业发展到今天,它创造的价值和带来的社会效应,大家已经看得很明白,同时很多问题和不足也暴露出来,特别是hadoop能够提供的数据处理能力,现在已经挖掘到极限,但是现在各行业对数据的存储和计算需求 ...

  9. python 2.7.10 找不到 libmysqlclient.18.dylib 解决方案

    Mac os x 升级到最新版后出现 python MysqlDB 无法找到 libmysqlclient.18.dylib 的问题,尝试的解决方案如下: 1.  升级更新 mysql 到最新版,无效 ...

  10. 动态链接库(dll) __declspec(dllimport) __declspec(dllexport)

    一. __declspec(dllexport) Microsoft 在 Visual C++ 的 16 位编译器版本中引入了 __export,使编译器得以自动生成导出名并将它们放到一个 .lib ...