代码之家 › 专栏 › 技术社区 › dfa

输入文本/文本区域大小

internet-explorer-7 internet-explorer-8 forms firefox internet-explorer

dfa · 技术社区 · 15 年前

形式:

<form id="defineForm" method="POST" action="api/test">
  <fieldset>
    <legend>Generale</legend>
        <input type="text" name="id" size="60" maxlength="60"/>
        <input type="text" name="descr" size="60"/>
        <textarea name="longDescr" cols="62" rows="10"></textarea>

使用 cols="62" 对于“longdescr”和 size="60" 对于“ID”,生成 相同宽度 (哦!哦!惊喜!)关于IE8:

   [ text       ] 
   [ text       ]
   [ textarea   ]
   [            ]

当然,这些值会在Firefox上产生另一个结果(如我预期的两个不同的宽度),比如:

   [ text       ] 
   [ text       ]
   [ textarea      ]
   [               ]

如何强制输入文本和文本区域的宽度(至少在IE7/8和Firefox上)相同?

编辑

我正在使用此CSS:

input, textarea {
    margin: 15px;
    padding: 3px;
    display: block;
    width: 20ex;
}

但它在火狐上不起作用

2 回复 | 直到 14 年前

RichieHindle 15 年前

使用CSS width 样式以实际单位表示物理宽度:

#id, #longDescr {
    width: 60ex;
}

你得给他们每人一个 id 属性匹配 name 在那之前。

除非你给它们一个像素宽度,否则你还需要确保它们使用相同的字体,默认情况下,在许多浏览器上它们不会使用相同的字体。最简单的方法是这样:

#id, #longDescr {
    font: inherit;
    width: 60ex;
}

这将使它们使用与页面其他部分相同的字体,但显然您可能希望指定要使用的确切字体。

kdgregory 15 年前

为每个字段创建一个ID,然后使用css设置 display 到 inline-block 和 width 无论你想要什么。

我也建议增加 <label> 字段的元素。我相信这会给你一个浏览器支持的工具提示,以及更好的屏幕阅读器的可用性。

推荐文章

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

Maddison · 如果用户选择18岁以下,则需要表单重定向用户

2 年前

Maddison · 拆分用户全名并将名字传递给下一个表单pae

2 年前

Santiago Cuartas Rmrz · 使用Javascript根据密码输入长度启用/禁用按钮

2 年前

BABO SAMMO NG · 如何延迟javascript警报直到操作完成

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

Shikhor Khan · 如何从下面的代码中删除提交后的表单值?

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

inyourface3445 · 更改表单中的值会导致延迟

2 年前

Filippo · 无法输入:焦点覆盖默认设置

2 年前