网页制作中经常要控制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. SPR EAD NET 6

    SPR EAD_NET6 下载地址 http://www.gcpowertools.com.cn/downloads/trial/Spread.NET/EN_SPREAD_NET6_SETUP_RA_ ...

  2. RESTful Api 身份认证中的安全性设计探讨

    REST 是一种软件架构风格.RESTful Api 是基于 HTTP 协议的 Api,是无状态传输.它的核心是将所有的 Api 都理解为一个网络资源.将所有的客户端和服务器的状态转移(动作)封装到 ...

  3. IDEA Community(社区版) 使用Maven创建Web工程 并部署tomcat

    由于IDEA社区版(Community)无法直接New一个Web Appplication 所以要使用maven来创建 1.创建一个Project 2. 3. 4.这里在Properties中添加一个 ...

  4. linux 交换分区分配规则

    一般地, 内存小于2G ,则swap=2*RAM, 内存大于2G, 则swap=2+RAM, 然后满足上述规则就行.

  5. 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间

    http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...

  6. Angularjs过滤器的开发.

    先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...

  7. (easy)LeetCode 223.Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  8. 蓝桥杯---地宫取宝(记忆搜索=搜索+dp)

    题目网址:http://lx.lanqiao.org/problem.page?gpid=T120 问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值 ...

  9. springMVC3 ckeditor3.6 图片上传 JS回调

    一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...

  10. 学习记录 java随机数的产生机制

    java 随机数 一.在j2se里我们可以使用Math.random()方法来产生一个随机数,这个产生的随机数是0-1之间的一个double,我们可以把他乘以一定的数,比如说乘以100,他就是个100 ...