浮动在IE6,7下的一些问题
生活随笔
收集整理的這篇文章主要介紹了
浮动在IE6,7下的一些问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、首先如果兩個元素要并在同一行,使用float最好兩個都加浮動
2、IE6下雙邊距問題,當有塊級元素浮動的時候,該元素的橫向margin值會被放大為兩倍,解決辦法:給該元素加display:inline即可。
3、li的一些問題
a:如果有兩列布局,我們僅僅給右邊加有浮動,在IE6,7下會折行,解決辦法:正如第一條建議一樣,要并在同一行的元素,最好都加浮動,所以這里只要給左列的元素也加上左浮動。
b、IE6,7下LI內部的元素都浮動的話,li之間會有4px的間隙。解決辦法:給li加vertical-align:top/middle.
這里亂入了一個vertical-align。索性講講他的作用吧。顧名思義是設置垂直對齊方式
<!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>如上例,給一個元素里面的內容元素設置對齊方式,而且每一個元素都要加上vertical-align:top/middle/bottom.
4、ie6下最小高度問題,前面有用到font-size:0;來解決,但是只能解決到2px。給該元素加上overflow:hidden;更完美的解決方案。
轉載于:https://www.cnblogs.com/toodeep/p/4573952.html
總結
以上是生活随笔為你收集整理的浮动在IE6,7下的一些问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 去苹果浏览器默认样式
- 下一篇: 2-SAT !!