2

したがって、私が知っていることは、W3C ボックス モデルでは、幅がボックスのコンテンツの幅を表すため、パディングがボックスの幅に追加されるということです。CSS3 の calc() 関数は、パーセンテージ幅からピクセル幅を減算するなどの算術演算を実行できるようにするもので、この (ひどい) ボックス モデルの原因となった問題に対処するために作成されたと思います。

ただし、次のように calc() を使用すると、Firefox と chrome の両方で同じ奇妙な結果が得られます。

.feedpost_form {
    position: relative;
    height: 80px;
    border-bottom: 1px solid #999999;
    margin: 0;
    padding: 8px;
    width: calc(100% - 8px*2);
    background-color: rgba(0,0,0,0.1);
}
.feedpost_form textarea {
    width: calc(100%);
}

.feedpost_form の要素幅は、予想どおり 100% です。テキストエリアが左から 8px にあることに気付いたので、パディングは予想どおり 8px のようです。これは、CSS の幅、したがってコンテンツの幅が、要素の幅から正味の水平パディングを引いたものであることを意味します。たとえば、.feedpost_form 要素の幅が 116 ピクセルの場合、CSS の幅 (コンテンツの幅) は 100 ピクセルになると思います。

textarea は、幅が 100% であるため、親のコンテンツ幅の幅にまたがるべきだと思います。たとえば、.feedpost_form の要素の幅が 116 ピクセルで、CSS の幅が 100 ピクセルの場合、テキストエリアの幅は 100 ピクセルで、パディング内にとどまる必要があると思います。

私が得る実際の結果は、テキストエリアの幅が予想よりも大きいことです。最も紛らわしい部分は、コンテナからはみ出さず、右側のパディングのみに切り込むことです。これは、テキストエリアの結果の幅が .feedpost_form の css 幅 + 1/2 ネットパディングであり、テキストエリアの幅を calc(100% - 8px) に設定すると問題が解決することを意味すると思います。

これが私の質問です。これは意図した結果ですか、それとも両方のブラウザが同じ間違いを犯していますか? それが意図されている場合、私は何が欠けていますか? ボックスモデルと矛盾しませんか？

4

1 に答える 1

1

あなたは calc を正しく理解していると思いますし、実際に得られる結果は私には正しいように思えます。デフォルトの css boxmodel の幅にも境界線が追加され、テキストエリアにはデフォルトで 1px の境界線があることを忘れていました。そのため、テキストエリアが親のパディングにぶつかります。

したがって、これらの 2px を考慮に入れれば、または1px * 2好きなように、問題なく動作するはずです。

.feedpost_form textarea {
    width: calc(100% - 1px * 2);
}

あなたが自分で見ることができるように、私はそれらを並べて置きました: http://jsfiddle.net/rmHU3/

ところで、もしあなたがデフォルトのボックスモデルにとても反対しているのなら、なぜ を使わないのですかbox-sizing: border-box?ボックスサイズ/

于 2013-07-25T19:34:50.387 に答える