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