CSSの幅には埋め込みが含まれていますか？

132

IEでは、幅にはパディングサイズが含まれているようです。 FFでは、幅はありません。どうすれば同じように動作させることができますか？CSSの幅には埋め込みが含まれていますか？

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

出典

2011-01-15 Jake

あなたはおそらく、標準準拠モードを有効にする必要があります。しかし、いくつかのコードを見ることなく、私はそれ以上の指針を与えることはできません。 –

283

に似たものを使用してください。このモデルでは、要素の幅にはパディングと境界線が含まれます。たとえば、
#foo { width: 10em; padding: 2em; border: 1em; }
は、10emとなります。
対照的に、標準を恐れるブラウザーはすべて「コンテンツボックス」ボックスモデルに既定します。このモデルでは、要素の幅はではなく、にはパディングまたはボーダーが含まれます。たとえば、次の各エッジに対して各側に10em + 2emパディング、+ 1em境界：
#foo { width: 10em; padding: 2em; border: 1em; }
は実際16em広いであろう。あなたがvalid markup、good doctypeでIEの現代版を使用して、appropriate headers場合

それが標準に準拠します。そうしないと、経由して、「ボーダー・ボックス」を使用する現代の基準に準拠したブラウザを強制することができます

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

最初の宣言はオペラのために必要とされ、第二第三は、WebkitのとChrome用で、Firefoxのためのものです。 Webkitの（SafariとChromeは）任意の宣言を経由してpadding-boxボックスモデルをサポートしていないことをhttp://phrogz.net/CSS/boxsizing.html

注：

は、ここで私はあなたのブラウザがサポートしているボックスのサイズ変更宣言テストのために数年前に作られた簡単なテストです。

出典

2011-01-15 04:59:55 Phrogz

+1コンテンツボックスと境界ボックスモデルの両方に言及しています。しかし、違いを詳しく説明したいかもしれません。 – BoltClock

@BoltClockもっと厳格に答えようとしてくれてありがとう。更新しました。 – Phrogz

ニースの答え。私は2,3日間、さまざまなオプションの名前を覚えている（または見つけようとしている）... +1 =） –

簡単なルールは、同じ要素に対してpadding/marginとwidthプロパティを使用しないようにすることです。すなわち、IEがより便利--が、非標準「ボーダー・ボックス」ボックスモデルを使用するために使用されるこの

<div class="width-div"> 
    <div class="padding-div"> 
    ........... 
    ........... 
    </div> 
</div>

出典

2011-01-15 04:59:44 shankhan

私はこの方法を定期的に使用しており、クロスブラウザーの問題は発生しません。 –

Doctypeを宣言していますか？私がhtmlのコーディングを始めたとき、私はこの問題を抱えていました。そしてdoctypeが宣言されていないからでした。私のお気に入りは、次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
... 
</html>

出典

2011-01-15 15:28:23 tybro0103

が、私はこの質問にぶつかったと、それは歳の夫婦がいたとしても、私はこのような場合には、誰もがこのスレッドにバンプ加えるかもしれないと思いました。

CSS3にはボックスサイズのプロパティが追加されました。たとえば、

.bigbox { 
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333; 
    padding: 10px; 
}

あなたのクラスは1030pxではなく1000pxの幅になります。もちろん、それは他の方法では解決できない問題を解決するので、liquid divsでピクセルサイズの境界線を使用する人にとっては、これは非常に便利です。

IE7以下を除くすべての主要なブラウザでは、ボックスサイズがより優れています。には、幅または高さのディメンション内のすべての項目がになるように、ボックスサイズを枠に設定します。集計他の項目は幅と高さにデフォルトで設定されています。ボックスサイズは「コンテンツボックス」に設定できます。

私は、ブラウザの構文の現在の状態がわからないんだけど、私はまだ-mozや-webkit接頭辞が含まれています

.bigbox{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

出典

2014-02-10 17:36:09

はい、Paul Irishにはここのブログ記事があります： http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

CSSの幅には埋め込みが含まれていますか？

答えて

関連する問題