DIV+CSS 常见问题及解决办法整理
http://www.ituring.com.cn/article/64951
1. 【IE6】浮动双倍边距bug:
问题 :同时使用“float”和“margin”,则margin在IE6下实际显示为双倍。
解决:给浮动容器定义display:inline
demo:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css 双边距问题</title> <style> * { margin: 0; padding: 0; } .float-box { float: left; width: 150px; height: 150px; margin: 5px 0 5px 300px; /*display: inline;*/ /*外边距的最后一个值保证了300像素的距离*/ } </style> </head> <body> <div class="float-box"> 双边距bug(IE6) </div> </body> </html>
2. 【IE6】width和height值 = 最小值
问题:IE6不认min-height,但hight=min-height。若只设定min-height,IE6下等于没有高度;若只设定高度,IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。
解决:
height: auto!important; /*使其他浏览器高度自适应*/
height: 100px; /*针对IE6 最小高度*/
min-height: 100px; /*针对其他浏览器最小高度*/
demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>IE6 min-height 不认问题</title> <style> body { font-family: Arial, Helvetica, 宋体, sans-serif; font-size: 12px; text-align: center; background-color: #D4D5CC; } #wrapper { height: auto !important; /*使其他浏览器高度自适应*/ height: 500px; /*针对IE6 最小高度*/ min-height: 500px; /*针对其他浏览器最小高度*/ width: 760px; background-color: #e5e5e5; border: 1px solid #fff; text-align: left; line-height: 150%; padding: 20px; margin: 10px auto; } </style> </head> <body> <div id="wrapper"> Hello World <br/> Hello World <br/> Hello World <br/> Hello World <br/> Hello World <br/> Hello World <br/> </div> </body> </html>
3. 【IE6】为什么无法定义1px左右高度的容器?
问题:这是因为默认的行高造成的
解决:(选择一种)
①、overflow:hidden;
②、zoom:0.08;
③、line-height:1px;
demo:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>IE6 div 不能实现1px 高度的几种解决方法</title> <style> .test { font-size: 0px; height: 1px; line-height: 1px; background-color: red; } .test2 { height: 1px; overflow: hidden; background-color: red; } /*.test3 {*/ /*height: 1px;*/ /*zoom: 0.08;*/ /*background-color: red;*/ /*}*/ </style> </head> <body> <div class="test"> </div> <div class="test2"></div> <div class="test3"></div> </body> </html>
4. 【IE6】mirror margin bug
问题:当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题
解决:外层元素设定border 或 设定float。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。