1

我有以下两个表单字段。它们具有相同的宽度，因此它们应该对齐显示，并且除了 Google Chrome 之外它们都是如此。在谷歌浏览器中，文本区域的宽度稍大一些。请帮我修复它。谢谢

           <input name="phone" type="text" id="phone"  style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px;  margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
   <textarea
    name="message"
    cols="38"
    rows="12"
    id="message"
    style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
    onFocus="if(this.value==this.defaultValue)this.value='';"
    onBlur="if(this.value=='')this.value=this.defaultValue;">
Message

4

3 回答 3

2

在您发布的代码中，您的文本区域有一个width:38px;您的意思是必须width:385px;匹配输入字段的宽度吗？您可能还想包含一个reset.css

于 2012-06-07T22:31:40.523 回答
1

我怀疑元素样式中的textarea38px 是一个拼写错误，应该是 385px，否则在所有支持 CSS 的浏览器上，您会将该区域缩小。input而且我怀疑在实际代码中，有些东西会导致andtextarea元素之间出现换行符；否则很难比较它们的宽度。

Chrome 上 textarea 稍宽的原因是基于 WebKit 的浏览器的浏览器样式表，textarea元素有 2px 的填充。如果您使用 Chrome 的 Inspect element 工具（通过右键单击）并在那里查看“Metrics”，您可以看到这一点。

明显的解决方案是textarea { padding: 0; }。但是由于填充实际上很有用，因此设置可能会更好

textarea, input { padding: 2px; }
于 2012-06-08T03:18:40.903 回答
0

您似乎正在使用size属性调整输入元素的大小并cols在您的文本区域中使用。

您还定义了两种样式：width:385px和width:38px（不等式可能是您的问题）。我不确定哪个需要 predence ( sizeor cols)，但为什么不避免混淆并width为两个元素设置 equal an 并删除sizeand row/col定义？

于 2012-06-07T22:31:47.383 回答