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”這樣以像素為單位進行指定

我知道這將需要一些時間來實現，但是將是一個長期的解決方案，並且在調整窗口大小的情況下也會有所幫助。