Windows 8.1上IE11的HTML文本字段大小

Question

我正在移植当前在IE6和IE8中运行的Web应用程序，以在Windows 8.1上的IE11中运行。

最严重的兼容性问题是关于文本字段的大小（即长度）。 与旧版浏览器相比，它们的显示时间通常长几毫米，从而淘汰了许多页面格式-例如。 由三部分组成的日期字段将溢出到下一行。

在我看来，问题在于使用SIZE = n来指定字符的字段长度。 看来这在IE8和IE9之后是不一致的，并且最好使用STYLE =“ WIDTH：npx” 。 链接： http ： //msdn.microsoft.com/en-us/library/ie/ff986079（v = vs.85）

我试图找到一种避免将更改应用于潜在的数百个字段的解决方案。

到目前为止，我已经研究了两种可能的解决方案：（1）删除IE11在文本字段中放入的“ x”（清除按钮），以防造成大小增加。 不幸的是，由于浏览器必须在兼容模式下运行，因此建议的解决方案（设置ms-clear）将无法使用。 （2）增加窗口大小。 这对某些字段有帮助，但对许多字段却没有帮助，并引起了其他不良的屏幕格式问题。

HTML中一组受影响的字段以及相关的CSS类定义的示例如下：

HTML：

<TABLE WIDTH="625" BORDER="0">
<!-- Column 1 --><COL WIDTH="100">
<!-- Column 2 --><COL WIDTH="115">
<!-- Column 3 --><COL WIDTH="102">
<!-- Column 4 --><COL WIDTH="93">
<!-- Column 5 --><COL WIDTH="40">
<!-- Column 6 --><COL WIDTH="20">
<!-- Column 7 --><COL WIDTH="137">
<TR>
    <TD>Date of Birth:</TD>
    <TD><INPUT TYPE="hidden" ID="DateOfBirth" NAME="DateOfBirth" SIZE="10" CLASS="clsText" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()">
                <INPUT ID="DateOfBirthDay" NAME="DateOfBirthDay" SIZE="2" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="2" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"> /
                <INPUT ID="DateOfBirthMonth" NAME="DateOfBirthMonth" SIZE="3" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"> /
                <INPUT ID="DateOfBirthYear" NAME="DateOfBirthYear" SIZE="4" CLASS="clsText" ONBLUR="validateField();" MAXLENGTH="4" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>Age Estimated?
    <INPUT TYPE="checkbox" NAME="AgeEstimated" ID="AgeEstimated" ONCLICK="AgeEstimatedEffects()" SIZE="1" VALUE="Y" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>App. Age or From:</TD>
    <TD><INPUT ID="ApparentAge" NAME="ApparentAge" MAXLENGTH="3" SIZE="3" CLASS="clsText" ONBLUR="validateField(); MoveFocusToAgeTo()" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>To:</TD>
    <TD><INPUT CLASS="clsText" ID="AgeTo" NAME="AgeTo" SIZE="3" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"></TD>
</TR>
</TABLE>

CSS：

.clsText
{
    COLOR: black;
    BACKGROUND-COLOR: white;
    FONT-SIZE: 11px;
    FONT-FAMILY: 'Microsoft Sans Serif';
    TEXT-ALIGN: left;
    TEXT-DECORATION: none
}

上面用CLASS =“ clsText”定义的所有字段都受到此问题的影响。

任何想法将不胜感激。

Answer 1

1. 以百分比指定列的宽度

2. 通过以百分比（而不是固定长度）定义其大小来更改文本框的大小定义。 这可以通过在输入标签中使用style属性来实现。 style =“ width：20％”而不是像size =“ 4”这样以像素为单位进行指定

我知道这将需要一些时间来实现，但是将是一个长期的解决方案，并且在调整窗口大小的情况下也会有所帮助。