項目積累（三）CSS

　　公司不是專門做網站的，偶爾會接到客戶讓修改前端，有時候和讓頭疼，自己瀏覽器兼容問題處理不好。

　　慢慢積累吧。

　　先貼出來一些前端代碼吧，如下：

1 <div class="test">2        <form id="Form1" runat="server">3                <span>請輸入內容：</span>4                <asp:TextBox ID="txtCode" runat="server" CssClass="txt"></asp:TextBox>5                <asp:Button ID="btnOK" runat="server" CssClass="submit"  Text="" />6                <asp:Button ID="btnReset" runat="server" CssClass="submit" Text="" />7        </form>8 </div>

　　按理說應該是對齊的，但是結果是：

　　文本框和按鈕沒有對齊，查看頁面的源碼：　

1  <span>請輸入內容：</span>2  <input name="txtCode" type="text" id="input_code" class="txt" />3  <input type="submit" name="submit" value=""  id="btnOK" class="submit" />4  <input type="submit" name="btnReset" value="" id="btnReset" class="submit" />

　　樣式

 1 .txt{ 2    border:none;  3    width:218px;  4    height:37px; 5    background:url(images/text.jpg) no-repeat; 6    padding-left:5px; 7 } 8 .submit{ 9     border: none;10     width: 100px;11     height: 40px;12     background: url(images/test-sure.jpg) no-repeat;13     cursor: pointer;14 }

　　最奇葩的是，試了火狐、谷歌、IE多版本、360多版本，各個瀏覽器顯示還不一樣，考慮應該是瀏覽器解析的默認值問題了，應該是有個默認值設定問題，因為本人css小菜，網上找了一下，發現了是按鈕的vertical-align式樣，統一顯示的設置為middle，搞定。

　　如下展示：

　　慢慢積累，希望自己每天成長。