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