巴斯光年

白天教学生,晚上教自己。致力于推进教育信息化。支持开源
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

[转]Firefox和IE中定义自适应高度的div

Posted on 2009-04-07 17:18  巴斯光年  阅读(704)  评论(0编辑  收藏  举报

在css中设置了div的默认高度,在IE中测试时div会随着内容的自动缩放,而在Firefox中内容会显示在div的外边。
针对上面的问题,通过使用选择器对css改造如下:
1.id属性选择器:
css代码
#div1{  
...  
 height:290px;/*IE中设置高度初始值*/ 
 min-height:290px;/*Firefox中设置高度初始值*/ 
...  
}  
/*使用属性选择器,IE不支持,专门给Firefox制定的,如果高度大于min-height,Firefox会根据内容自动改变高度*/ 
[id]#div1{height:auto;} 

#div1{
...
 height:290px;/*IE中设置高度初始值*/
 min-height:290px;/*Firefox中设置高度初始值*/
...
}
/*使用属性选择器,IE不支持,专门给Firefox制定的,如果高度大于min-height,Firefox会根据内容自动改变高度*/
[id]#div1{height:auto;}
2.class属性选择器:
css代码
.div1{  
...  
 height:290px;  
 min-height:290px;  
...  
}  
[class]#div1{height:auto;} 

.div1{
...
 height:290px;
 min-height:290px;
...
}
[class]#div1{height:auto;}
从上面的例子可以看出,选择器分为id和class两种。通过使用选择器,就可以对Firefox进行专门的定制,从而可以制定出适合两个浏览器样式单。