TextMode = Password时，ASP.NET文本框大小不同

I have a login page that has several textboxes on the page, one of them has the mode set to "password". This page worked previously but we've recently noticed (since an IE7 update) that the textbox that is specified as a password textbox is not as wide as the other textboxes on the page. If I remove the TextMode="Password", the textbox resizes to match the others.

我有一个登录页面,页面上有几个文本框,其中一个模式设置为“密码”。此页面之前有效,但我们最近注意到(自IE7更新以来)指定为密码文本框的文本框不像页面上的其他文本框那样宽。如果我删除TextMode =“密码”,文本框会调整大小以匹配其他文本框。

I've checked for oddities on the page when the page displays using the IE developer toolbar, but it all looks ok.

当使用IE开发人员工具栏显示页面时,我检查了页面上的奇怪现象,但一切看起来都不错。

The textbox code is fairly basic:

文本框代码非常基本:

    <tr>
  <td>
    Username
  </td>
  <td>
    <asp:TextBox ID="txtUsername" runat="server" TabIndex="2"></asp:TextBox>
  </td>
</tr>
<tr>
  <td>
    Password
  </td>
  <td>
    <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" TabIndex="3"></asp:TextBox>
  </td>
</tr>

I've found one other person asking about this on the web and they fixed it by applying a css to all the input controls on the page, but I haven't managed to get that to work either.

我发现另外一个人在网上询问这个问题并通过将css应用到页面上的所有输入控件来修复它,但我还没有设法让它工作。

7 个解决方案

#1

The best way to ensure that all of your controls will be of the same size is via style (either inline or in css).

确保所有控件大小相同的最佳方法是通过样式(内联或css)。

#2

I've found that if you use the following CSS:

我发现如果你使用以下CSS:

input, select { font-family: sans-serif; }

this will make the text and password boxes be the same width. The font-family does not have to be sans-serif, but it must be defined.

这将使文本和密码框的宽度相同。 font-family不必是sans-serif,但必须定义它。

This may be a better solution as it seems to fix the issue rather than band-aid over it by using an explicit width in your CSS. You can now just use the default font settings of the browser by using the generic font families or be explcit if you have a particular font you are using for the page.

这可能是一个更好的解决方案,因为它似乎通过在CSS中使用显式宽度来解决问题而不是对其进行创可。您现在可以使用通用字体系列来使用浏览器的默认字体设置,或者如果您使用了用于页面的特定字体,则可以使用explcit。

#3

It may help if you provide a Width="" property to your textboxes. That should force them to match up in terms of width even those they have different text modes.

如果您为文本框提供Width =“”属性,它可能会有所帮助。这应该迫使他们在宽度方面匹配,即使他们有不同的文本模式。

#4

If you specify a value (like 20) for the TextBox.Columns property (which maps to the <input size="" /> attribute) they'll match up. If you want to use CSS, you should try to avoid an inline style (which the TextBox.Width property creates).

如果为TextBox.Columns属性(映射到属性)指定值(如20),它们将匹配。如果要使用CSS,则应尽量避免使用内联样式(TextBox.Width属性创建)。

#5

You may try setting Width property of all the text boxes to be same. 150 would be a good value.

您可以尝试将所有文本框的Width属性设置为相同。 150将是一个很好的价值。

#6

I think it is normal to have different widths for password-type and non-password-type textboxes when you specify the size as "columns", as the width of a textbox is calculated by multiplying the width of the largest character in the font (say, "m") by the requested number of columns.

我认为当您将大小指定为“列”时,为密码类型和非密码类型的文本框设置不同的宽度是正常的,因为文本框的宽度是通过乘以字体中最大字符的宽度来计算的(按要求的列数说“m”)。

When passworded, the largest character is always the bullet (all chars are bullets), so the width is different (when using a proportional font obviously). To solve this problem, specify a width in pixel and not columns, i.e.: style="width:250px;" (or use a non-proportional font).

当密码时,最大的字符总是子弹(所有字符都是子弹),因此宽度不同(显然使用比例字体时)。要解决此问题,请以像素而不是列指定宽度,即:style =“width:250px;” (或使用非比例字体)。

#7

I recently ran into this problem with internet explorer 11. I tried everything here and nothing worked, but then stumbled onto this post. What solved it for me was doing this:

我最近遇到了这个问题与Internet Explorer 11。我在这里尝试了一切,没有任何效果,但后来偶然发现了这篇文章。为我解决的是这样做:

<tr>
    <td style="width: 1000px; text-align: right;">User Name:</td>
    <td style="width: 200px; text-align: right;">
        <asp:TextBox ID="UNTextBox" runat="server" style="width: 200px;"></asp:TextBox>
    </td>
</tr>
<tr>
    <td style="width: 1000px; text-align: right">Password:</td>
    <td style="width: 200px; text-align: right;">
        <asp:TextBox ID="PassTextBox" runat="server" TextMode="Password" style="width: 200px;"></asp:TextBox>
    </td>
</tr>

I HAD to put in style="width: 200px;" straight into the asp:TextBox tag or the sizes just would not match up in IE11.

我必须放入style =“width:200px;”直接进入asp:TextBox标签或IE11中的大小不匹配。

Hope that helps someone

希望能帮助别人

#1