[转]CSS中设置div最小高度(支持IE6, IE7, IE8, FF等浏览器)

举报
wh_bn 发表于 2021/12/16 01:10:48 2021/12/16
【摘要】 在CSS中设置div(及其他块元素)的最小高度时,可以用min-height,但是此属性并不支持IE6及IE6以下的IE版本,这里有一个比较好的办法来解决设置div最小高度时在各个浏览器之间的兼容性问题,适用于IE5.5、IE6、IE7、IE8、IE9、Firefox、Google Chrome、Safari等所有浏览器。 假设你...

在CSS中设置div(及其他块元素)的最小高度时,可以用min-height,但是此属性并不支持IE6及IE6以下的IE版本,这里有一个比较好的办法来解决设置div最小高度时在各个浏览器之间的兼容性问题,适用于IE5.5、IE6、IE7、IE8、IE9、Firefox、Google Chrome、Safari等所有浏览器。

假设你要设置的最小高度是100px,那么代码如下:

1 div {
2     heightauto!important;
3     height100px;
4     min-height100px;
5 }

用此方法设置div最小高度的原理:

IE5.5和IE6并不支持!important和min-height, 所以在IE5.5和IE6看来这个CSS是这样的:

1 div {
2     height100px;
3 }

而在IE5.5和IE6中,即使设置了height,也是可以自动延伸的,所以效果和在其他浏览器中设置min-height的效果是一样的。

在其他浏览器(IE7、IE8、IE9、Firefox、Google Chrome、Safari)中,这几种属性及值都是支持的,并且!important优先权比较高,所以对于这些浏览器来说,有效的CSS是这样的:

1 div {
2     heightauto!important;
3     min-height100px;
4 }

OK,这样就解决了设置div最小高度时在各种浏览器之间不兼容的问题了。

来源:http://jae.iterc.com/web%E5%89%8D%E7%AB%AF/CSS%E4%B8%AD%E8%AE%BE%E7%BD%AEdiv%E6%9C%80%E5%B0%8F%E9%AB%98%E5%BA%A6.html

文章来源: blog.csdn.net,作者:fengda2870,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/fengda2870/article/details/7322868

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。