0

私たちはこの種のことはほとんど過去のものだと思っていましたが、Firefox と IE と Chrome との表示方法に矛盾があることを発見しました (おそらく CSS の神々にはよく知られています)。

ここでこの jsfiddle を見てください: http://jsfiddle.net/smithkl42/jmgEV/1/

div.parent{
  position:relative;
  height:200px;
  width:400px;
  background-color:blue;
}

textarea.child{
  position:absolute;
  height:30px;
  bottom:2px;
  left:2px;
  right:2px;
}

<textarea>Chrome では、親 div の下部に表示し、親 div と同じ幅にするという、私が望むことを行います。しかし、FireFox と IE では、right:2px線は無視され、デフォルトの幅が与えられます。

をa に置き換える<textarea>と<div>(こちらを参照)、希望どおりに動作します。

理由はありますか？

編集：すべての提案をありがとう。親要素（フィドルではなく、現実の世界では）のサイズが変更されることに注意してください。そのため、「幅を手動で設定するだけです」という提案は使用できません。たとえば、親要素の幅が 1200 ピクセルであるか 50 ピクセルであるかにかかわらず、左右の端からちょうど2 ピクセルである必要があります。ここで働きません。その他のコメントについては、以下を参照してください。

4

5 に答える 5

3

置き換えられる要素には常にwidthを で定義します。置換要素です。次のように書きます。position:absolute<textarea>

HTML

<div class="parent">
    <div class="child">
        <textarea></textarea>
    </div>
</div>

CSS

.parent{
    position:relative;
    height:200px;
    width:400px;
    background-color:blue;
}

.child{
    position:absolute;
    bottom:2px;
    left:2px;
    right:2px;
}
.child textarea{
    width:100%;
    height:30px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

これをチェックしてくださいhttp://jsfiddle.net/jmgEV/10/

于 2013-01-22T07:29:10.280 に答える
0

は要素でありtextarea、要素は要素です。inlinedivblock

あなたの作業例では、.childはdiv（ablock要素）であるため、親の幅に合わせて水平に引き伸ばされます。

動作しない例では、childはtextarea(inline要素) であるため、自動的にストレッチされません。

もう 1 つの理由は、textarea要素のデフォルトの幅です。この要素には と呼ばれる属性があり、文字で計算されたcolsの長さを決定します。textareaこの属性のデフォルト値はであるため、プロパティ20の値を指定しない場合、このデフォルト値が適用されます。widthtextarea

width指定されていないインライン要素と比較するspanorの ような他のインライン要素ではq、widthプロパティが設定されていない場合、幅はゼロになります。

于 2013-01-22T07:34:56.933 に答える
0

IE の実装が間違っていると思います。彼はそれをスクラッチできません。それを修正するより簡単な方法だと思います-あまりにも設定mwidthしてください。.childまたは設定min-width 

.child{
     position:absolute;
     height:30px;
     bottom:2px;
     right:2px;
     left:2px;
     min-width:394px;
}
于 2013-01-22T07:27:18.950 に答える
0 
.parent{
position:relative;
height:200px;
width:400px;
background-color:blue;
}

.child{
position:absolute;
height:30px;
bottom:2px;
left:2px;
right:2px;
}

<div class="parent">
<textarea class="child" cols="47" style=" resize: none;"></textarea>
</div>

こんにちは、これがお役に立てば幸いです。デモ: http://jsfiddle.net/jmgEV/8/

ありがとうございました。

于 2013-01-22T07:30:30.790 に答える
0

この .child{ position:absolute; を試してください。幅:97%; 高さ:30px; 下：2px; 左：2px; 右：2px; }

于 2013-01-22T07:30:36.703 に答える