html - IE / FF / Chrome 之间的文本框宽度不同 - 文本框填充“W”时会导致问题

Question

我们有一个应用程序，它有一个指定长度的文本字段 - 4。

铬：铬合金火狐：

有没有办法强制 Firefox / IE 使用固定宽度的间距？这是 ID 号的问题，该字段实际上接受完整输入，但默认情况下不显示完整宽度（如果他们从屏幕键入字段而不是复制/粘贴，可能会导致用户错误）。

score 1 · Accepted Answer

而是尝试将size属性更改为 5。因此在所有浏览器中，它都适合。

<input size="5" maxlength="4" value="WWWW" id="txt">

score 0 · Accepted Answer

HTML

<input size="4" maxlength="4" value="WWWW" id="txt">

CSS

#txt{
    font-family: Courier New;
    font-size: 15px;
}

演示

这是其他人建议的一些东西的“组合”......我在 jsfiddle 中使用 Internet Explorer、Firefox 和 Chrome 玩了一段时间，这个组合似乎最适合我，并提供一致的结果跨浏览器。

score 0 · Accepted Answer

我会推荐以下代码无论您使用哪种字体系列，它都会生成指定字符宽度的文本框。

HTML 代码

<input size="4" maxlength="4" value="WWWW" id="txt">

CSS 代码

#txt{
    width:4em;
}

这将始终使文本框等于 4 个“M”的宽度，因此它为您提供了在框中使用任何 4 个字符的安全空间。

有关使用各种系统设置宽度的更多说明，请点击以下链接。

score 0 · Accepted Answer

试试这个 CSS 扇区规则

#elementId
{
    letter-spacing: 5px;
}

.elementClass
{
    letter-spacing: 5px;
}

score 0 · Accepted Answer

您无需担心代码，但请检查您为 TEXTBOX 列出的字体在两种浏览器中都可用吗？

我相信这就是与众不同的原因。

score 0 · Accepted Answer

而不是使用size属性尝试纯CSS。例如这个

<input type="text" value="WWWW" id="txt">

#txt{
    font-family: Courier New;
    font-size: 15px;
    width:40px;
}

在所有浏览器中应该看起来都差不多。

score 0 · Accepted Answer

尝试设置输入元素的宽度，只保留 size 和 maxlength 属性的值。它在所有不同类型的浏览器中都具有相同的长度，但仍然具有不同的渲染。

input {
     width: 50px;
     padding: 5px;
}

score 0 · Accepted Answer

在您的输入文本中添加一些 CSS，例如

HTML

<input type="text" class="blabla">

CSS

.blabla{
width: 100px;
}

在 CSS 上输入 size 后不要忘记添加 px。

8 回答 8