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

输入文本/文本区域大小

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

3

dfa · 技术社区 · 16 年前

形式:

<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 回复 | 直到 15 年前

1

5

RichieHindle 16 年前

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

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

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

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

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

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

2

1

kdgregory 16 年前

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

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