0

この js fiddleを参照してください。

html:

<div></div>
<textarea>something here...</textarea>

CSS:

textarea {
    height: 1em;
    float:left;
    padding: 0.5em;
    border-width: 1px;
    border-color: #ff0000;
    border-style: solid;
    margin: 0;
    width: 20em;
}

div {
    height: 2em;
    float:left;
    width: 2em;
    margin: 0;
    padding: 0;
    border-width: 1px;    
    border-color: #ff0000;
    border-style: solid;
    margin: 0;    
}
4

4 に答える 4

4

em単位はフォントサイズに依存します。

body と textarea のデフォルトのフォントは、通常同じ高さではありません (同じフォントではないため)。

追加*{font-family:sans-serif}したところ、高さの問題は修正されました。

于 2013-02-18T16:04:04.750 に答える
0

em で測定値を統一するには、親コンテナーで font-size を定義する必要があります。font-size をコンテナーに割り当てるように編集しました。これを見直してください

その周りにラッパーを追加しました

<div id="test">
    <div id="inner"></div>
    <textarea>something here...</textarea>
</div>
于 2013-02-18T16:17:52.827 に答える
0

にfont-size応じて高さを設定していfont-sizeます。

Firebug を使用してfont-sizeと の両方divをチェックtextareaしました。最初のケースでは 16px で、textarea12px です。これは標準的なブラウザーの動作です。Web サイトの他の部分とは異なるフォント サイズが適用されますtextarea。手動で、または CSS リセットを使用して、両方に同じ font-size を適用してみてください。

于 2013-02-18T16:09:22.433 に答える
0

私はあなたが何を見ているのか100%確信が持てません。これはどのブラウザで発生していますか? 私はいくつかの変更を加えました http://jsfiddle.net/hgHLe/

    textarea {
    height: 1em;  
    float:left;
    padding: 0.5em;
    border-width: 1px;
    border-color: #ff0000;
    border-style: solid;
    margin: 0;
    width: 20em;
}

.child {
    height: 2em;  
    overflow:none;
    float:left;
    width: 2em;
    margin: 0;
    padding: 0;
    border-width: 1px;    
    border-color: #ff0000;
    border-style: solid;
    margin: 0;    
}
.master{

    height: 2em;  

}



<div class='master'><div class='child'>:D</div>
    <textarea>something here...</textarea></div>

ダイブを .child に置き換えた .master を追加しました

追加されたオーバーフロー:なし; 2emと同様にマスターする

さらに強制フォントサイズを追加

body{
font-size:12px;

}

ノート！Jfiddle がノーマライザー CSS を使用していることを忘れないでください。

于 2013-02-18T16:08:21.120 に答える