浮动在IE6,7下的一些问题
1、首先如果兩個(gè)元素要并在同一行,使用float最好兩個(gè)都加浮動(dòng)
2、IE6下雙邊距問(wèn)題,當(dāng)有塊級(jí)元素浮動(dòng)的時(shí)候,該元素的橫向margin值會(huì)被放大為兩倍,解決辦法:給該元素加display:inline即可。
3、li的一些問(wèn)題
a:如果有兩列布局,我們僅僅給右邊加有浮動(dòng),在IE6,7下會(huì)折行,解決辦法:正如第一條建議一樣,要并在同一行的元素,最好都加浮動(dòng),所以這里只要給左列的元素也加上左浮動(dòng)。
b、IE6,7下LI內(nèi)部的元素都浮動(dòng)的話,li之間會(huì)有4px的間隙。解決辦法:給li加vertical-align:top/middle.
這里亂入了一個(gè)vertical-align。索性講講他的作用吧。顧名思義是設(shè)置垂直對(duì)齊方式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>zwl-byself</title> <style> .wrap{height:200px;border:2px solid #000; text-align:center;} .span1{ width:100px;height:200px;background:yellow; display:inline-block; vertical-align:middle;} .span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;} </style> </head> <body> <div class="box"><span class="span1"></span><span class="span2"></span> </div> </body> </html>如上例,給一個(gè)元素里面的內(nèi)容元素設(shè)置對(duì)齊方式,而且每一個(gè)元素都要加上vertical-align:top/middle/bottom.
4、ie6下最小高度問(wèn)題,前面有用到font-size:0;來(lái)解決,但是只能解決到2px。給該元素加上overflow:hidden;更完美的解決方案。
轉(zhuǎn)載于:https://www.cnblogs.com/toodeep/p/4573952.html
總結(jié)
以上是生活随笔為你收集整理的浮动在IE6,7下的一些问题的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 去苹果浏览器默认样式
- 下一篇: 2-SAT !!