作为一名不太合格的前端开发人员,惊闻项目要兼容IE7,我的内心是绝望的,无奈迫于生计,项目该做还是要做的,毕竟我还是食人间烟火的!具体项目就不谈了,做之前查了好多的资料,结合自己的使用,总结一下,以备不时之需!
登录页占满整个屏幕
-
将内容部分的底部外边距设为负数(支持所有现代浏览器,以及兼容IE7+)
CSS代码*{ margin: 0; padding: 0; } html,body{ height: 100%; } .container{ min-height: 100%; /*等于footer的高度*/ margin-bottom: -50px; } .footer{ height: 50px; background-color: #000; color: #fff; }复制代码
HTML代码
<div class="container">这是内容</div>
<div class="footer">这是尾部</div>
-
将页脚的顶部外边距设为负数(支持所有现代浏览器,以及兼容IE7+)
CSS代码*{ margin: 0; padding: 0; } html,body{ height: 100%; } .container{ min-height: 100%; } .footer{ height: 50px; /*要和高度保持一致*/ magtin-top:-50px; background-color: #000; color: #fff; }复制代码
HTML代码
<div class="container">这是内容</div>
<div class="footer">这是尾部</div>
-
使用calc()设置内容高度,属于css3属性(支持所有现代浏览器,以及兼容IE9+)
CSS代码*{ margin: 0; padding: 0; } html,body{ height: 100%; } .container{ min-height: calc(100vh - 50px); } .footer{ height: 50px; background-color: #000; color: #fff; }复制代码
HTML代码
<div class="container">这是内容</div>
<div class="footer">这是尾部</div>
- 使用flexbox弹性盒布局(支持所有现代浏览器,以及兼容IE9+)
CSS代码
HTML代码*{ margin: 0; padding: 0; } html{ height: 100%; } body{ min-height: 100%; display:flex; flex-direction: column; } .container{ flex:1; } .footer{ height: 50px; background-color: #000; color: #fff; }复制代码
<div class="container">这是内容</div>
<div class="footer">这是尾部</div>
以上内容将仅供参考,兼容性问题还请慎重!!!
背景小图标实现
对于IE7而言,如果要使用a标签去实现背景小图标,一定要在a标签里面去填充内容,简单的padding-left=20px,是不行的,还需要<a href="javascript:;"> </a>
;当时这个bug调试了好久,简直要奔溃啊!好在最后还是找到了解决方案!
IE7清除浮动的问题
对于IE7的清除浮动,除去常规的清除浮动,还需要在父级添加width:100%
或者overflow: hidden
。
未完待续……