CSS 控制最小宽度,最小高度

[url]http://blog.163.com/chenzhenhua_007/blog/static/12849264920111943230704/[/url]
可以使用 css 属性:min-width。但是,IE 不认。Google 找到一个文章,讲解了如何纯用 css 解决这个问题。方法是配合使用 min-width 和仅 IE 认的 Dynamic Properties。
例子:
min-width:785px;
width:expression(document.body.clientWidth < 800 ? "785px" : "100%" );


这个东西真的不错,我喜欢,哈哈

高度最小值
box {
min-height:100px; /*高度最小值设置为:100px*/
height:auto !important; /*兼容FF,IE7也支持 !important标签*/
height:100px; /*兼容ie6*/
overflow:visible;
}



这段文字内容,ax /min 在ie7 + 和firfox,safari,opera浏览器下均支持,最宽值为250px
不过IE6无法认读这个属性,还好IE它支持自己 javascript的属性表达,例如:

  div{width:expression_r_r_r(250+"px")} 和 div{widt:250px}在IE 的认读中都是一致的!但如果有的用户在浏览器中禁用javascript,这个写法就失败了。所以,需要换一种方法:
 #mycss {
  width:100%;
  max-width:500px;
  width:e?xpression_r_r_r(document.body.clientWidth > 500? "500px": "auto" ); }

  或是:
#mycss {
  max-width: 33em;
   width: expression_r_r_r(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );

  }


  我们设置了容器mycss的宽度为:width:100%; 其实这是一句废话,因为DIV是块元素,默认的宽度就是父级元素的宽度。此例中div宽度,若不进行声明则等同于body的宽度。

  我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。

  面对没有效果的IE,我们应用 e?xpression_r_r_r嵌入脚本,声明了当宽度大于500px的时候,宽度就等于500px。

   parseInt(document.body.currentStyle.fontSize)?"33e m":"auto" 如果这个实际宽度大于 (500/12)当前字体的尺寸,则设置页面的宽度为 33em。

  同样,对于最小的宽度,和ax/min-hight,也是一样的:
  最小:
#mycss {
  min-width: 333px;
  width: expression_r_r_r( document.body.clientWidth < 334 ? "333px" : "auto" );
  }


最大高度:
#mycss {
   max-height: 333px;
  height: e?xpression_r_r_r( this.scrollHeight > 332 ? "333px" : "auto" )
  }


最小高度:
 #mycss { min-height: 333px; height: e?xpression_r_r_r( this.scrollHeight < 334 ? "333px" : "auto" );
  }
另外还有一种简单的方法:
#a {height:auto !important; min-height:400px;}


  这个样式可以在IE5.5,IE6,IE7以及FF,Safari等浏览器下的解决最小高度问题,最大高度就没有实践过了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值