网页:适应IE和Firefox的Div最小高度设置 |
|
|
[
来路:21kn.com 时间:2007-7-7 20:56:50
点击: ] |
|
|
|
|
|
在IE环境下,其实height就几乎就等于是min-height,指定容器高度后,当内容撑大时有自动延伸的特质。在Firefox内不会,而是显示固定height值。所以,就要找到一种适应IE和Firefox的方法。 下面的四个Box中只有Box4是在IE和Firefox下都适应。
<html> <head> <style type="text/css"> <!-- .box1{ background-color:#F90; min-height:200px; width:125px; height:200px; float:left;} .box2{ background-color:#0CF; min-height:200px; width:125px; height:200px; float:left;} .box3{ background-color:#9C0; min-height:200px; width:125px; height:200px; float:left; height:auto;} .box4{ background-color:#F9C; min-height:200px; width:125px; height:200px; float:left;} [class].box4{height:auto;} --> </style></head>
<body> <div class="box1"> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> <p>BOX1</p> </div> <div class="box2"> <p>BOX2</p> </div> <div class="box3"> <p>BOX3</p> </div> <div class="box4"> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> <p>BOX4</p> </div> </body> </html>
下面时在两种浏览器中的截图。
|
|
|
::::站长友情提示:多花一分钟学点什么都好::::
|
|
|
|
|
|
|
|
|
|
|
|
=
= 免责声明 = = |
|
①
欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com |
|
|