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 = "width:20%"而不是像 size = "4"那样以像素为单位指定

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