問題：
最近在寫一個電商網站的靜態頁面練手，遇到了一個特別奇怪的現象，如下圖：
輸入框和旁邊的搜索框沒法對齊，於是乎百度解決方案，各種說法都有，但是沒有一個是自己認為切實可行的或者是說得比較簡單易懂的。
或許是我理解起來比較慢吧，呵呵。
下面直接進入正題之解決方案：
【本解決方案借鑒了百度首頁搜索框的寫法】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>調試</title> <style> span{float: left;display: inline-block;height: 40px;} input{border: 0 none;} .box{width: 300px;height: 300px;background-color: #808000;margin: 33px auto;padding: 30px ;} .span1{width: 150px;position: relative;} .input{height: 20px;width: 140px;padding: 10px 5px;position: absolute;top: 0;} .button{height: 40px;font: normal 18px/40px "微軟雅黑";} </style> </head> <body> <div class="box"> <span class="span1"> <input type="text" class="input"> </span> <span class="span2"> <input type="button" value="搜索" class="button"> </span> </div> </body> </html>
最后輸出的結果：
IE7
IE9和IE8
其他現代瀏覽器：
均可以達到較好的顯示效果。
【下面是代碼分析】
本方案的解決思路是，在input標簽外，套一個spaan標簽，作為input標簽的外殼，
即這種效果，此時的輸入框和搜索按鈕完全被包裹了在span標簽里面，這時候給span一個左浮動；那么不管在文檔流里面他們兩個是怎樣的相對關系，他們都會直直的懟到一起【因為這兩個span是一樣高的】，這樣即可以初步達到對齊的效果了。
然，由於神奇的IE7的存在，這種寫法還不夠。
此時在IE7中的顯示效果是這樣的，左邊的輸入框還是有一個極小的下沉。打開調試工具發現，布局下顯示：
竟然在margin的外側還有一個offset屬性，天啦嚕；以前沒接觸過這個屬性有木有，此時發揮神奇的想象力，將input的父級元素span1的position屬性強行設置為relative，然后將input的position屬性設置為absolute，並將input的top值設置為0，最終成功的解決了IE7下的顯示問題。~~
我想，類似與這樣的兼容性問題以后還會遇到很多很多，只有耐着性子去分析，其實還是可以解決的，其實兼容性的bug說白了也不算什么bug，而是不同瀏覽器在解析上的不同而已，多使用調試工具，看看到底是什么屬性出現了問題，對應的去解決，就可以了。哈哈，解決問題的思路還是比較重要的。