日期:2014-05-16  浏览次数:20384 次

EXTJS2.2中输入框边框显示不完整解决思路,一级解决办法。

同事在使用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环境下样式显示正常。