1

次の2つのフォームフィールドがあります。それらは同じ幅を持っているので、それらは整列して表示されるべきであり、GoogleChromeを除いてそうします。Google Chromeでは、textareaの幅が少し広くなっています。それを修正するのを手伝ってください。ありがとう

           <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;必要がありますか？また、 reset.csswidth:385px;を含めることもできます

于 2012-06-07T22:31:40.523 に答える
1

要素のスタイルの38pxはtextareaタイプミスであり、385pxである必要があると思います。そうしないと、CSS対応のすべてのブラウザーで領域が狭くなります。inputそして、実際のコードでは、要素とtextarea要素の間に改行を引き起こす何かがあるのではないかと思います。そうでなければ、それらの幅を比較することは困難です。

Chromeでtextareaがわずかに広い理由は、WebKitベースのブラウザーのブラウザースタイルシートでは、textarea要素に2pxのパディングがあるためです。Chromeの要素の検査ツールを使用して（右クリックで）、そこで「メトリック」を表示すると、これを確認できます。

明らかな解決策はtextarea { padding: 0; }です。しかし、パディングは実際に役立つので、設定する方が良いかもしれません

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

size属性を使用colsしてテキストエリアでを使用して、入力要素のサイズを変更しているようです。

また、2つのスタイルを定義しています：width:385pxとwidth:38px（不等式はおそらくあなたの問題です）。sizeどちらが重要か（または）かわかりませんが、混乱を避けて、両方の要素にcols等しいを設定し、および/の定義を削除してみませんか？widthsizerowcol

于 2012-06-07T22:31:47.383 に答える