EXTJS2.2中輸入框邊框顯示不完整解決思路,一級解決辦法。

來源:互聯網
上載者:User

同事在使用ExtJs時發現如下Bug:表單當中的元素,出現文字框參差不齊,有的沒有邊框等,不美觀;輸入框顯示不完整,抓狂。

分析步驟及解決思路如下:

   1.使用IE的F12功能,擷取產生的輸入框HTML指令碼,關鍵點指令碼如下。
<pre>
<br>
<DIV style="PADDING-LEFT: 15px;background:blue" class=x-form-element>
<INPUT class="x-form-text">
</DIV>
</pre>
    發現此輸入框會被上層的div遮擋住部分。
   2.將此HTML指令碼,放到EXT2.2、2.3、3.4版本中使用各版本不同的樣式表進行測試,是否有修正
   3.觀察到3.4版本已經修正。
   4.比對2.2和3.4版本的關於form.css的差異,併合並對於x-form-text的描述。
關鍵點樣式:
<pre>
.ext-ie .x-form-text {
   /*
    margin:-1px 0px;  ie bogus margin bug
    該代碼將部分影響到頁面中輸入框顯示不完整
    */
    margin:0px 0px;
    height:22px; /* ie quirks */
    line-height:18px;
}
</pre>

    經過修改後,在Windows2003+Ie8環境下一級Win7+Ie9環境下樣式顯示正常。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.