IE6/7和IE8/9(怪异模式)浮动元素折行Bug
生活随笔
收集整理的這篇文章主要介紹了
IE6/7和IE8/9(怪异模式)浮动元素折行Bug
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
網(wǎng)頁(yè)設(shè)計(jì)中,我們經(jīng)常需要設(shè)置一個(gè)元素向左或向右浮動(dòng)。如
<!DOCTYPE HTML> <html> <head><title>IE6/7和IE8/9(怪異模式)浮動(dòng)元素折行Bug</title><meta charset="utf-8"> </head> <body> <div style="width:300px;border:1px solid gray;padding:5px;"><input type="text" /><a href="javascript://;" style="float:right;">搜索</a> </div> </body> </html>div中有個(gè)輸入框和鏈接A,設(shè)置鏈接A向右浮動(dòng)。各瀏覽器表現(xiàn)如下
IE6/7 & IE8/9(Quirks mode) :
IE8/9(standard mode) & Firefox/Safari/Chrome/Opera :
可以看到在IE6/7 & IE8/9(Quirks mode) 中,“搜索” 鏈接折行了,這不是我們想要的結(jié)果。解決方式,把Input元素和鏈接A位置調(diào)換。如
<div style="width:300px;border:1px solid gray;"> <a href="javascript://;" style="float:right;">搜索</a><input type="text" /> </div>總結(jié)
以上是生活随笔為你收集整理的IE6/7和IE8/9(怪异模式)浮动元素折行Bug的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: T-SQL RIGHT JOIN
- 下一篇: Dispatcher initializ