100％の幅が親のdivよりも大きい

私はvBulletinのテーマに取り組んでいますが、スレッドリストではすべてのスレッドの幅は100％ですが、スレッドも親よりも大きいですが、親のdivに合っています:)。この問題は国境にあると思う。100％の幅が親のdivよりも大きい

方が良いのjsfiddle

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

出典

2013-08-03 AmirHosein KazemNejad

問題ここで（スレッドが黒のボーダーと白の形状がある）widthは、テキストと内側の面積の大きさ、および境界線とパディングがあるということであることがわかりますその周りに "包まれて"いる。その仕様は理にかなっていませんが、ほとんどの現代のブラウザはそれに従います。

あなたの救世主はbox-sizing: border-box;と呼ばれます。

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

ここを見て：このプロパティhereとhere上jsFiddle

詳細情報。

出典

2013-08-03 09:31:00 MightyPork

あなたが正しいです、境界線が要素の「幅」を押し出しています。最新のブラウザのデフォルトはbox-sizingです。それはあなたが作っているとあなたが望むサポートは、あなたが代替ソリューションやデザインを見つける必要があるかもしれないものによってはIE8の下にサポートされていないことを

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

注：これはのような宣言とほとんどで変更することができます。

EDIT

私のオリジナルの答えとブラウザのサポートが少し変更されましたので、それはしばらくしています。 Firefox 29、Chrome 10、Safari 5.1、Internet Explorer 8以降ではすべてbox-sizingがサポートされていますが、特定のバージョンの既知の問題がいくつかあります。

フル/最新のリストは、しかし、ここでcaniuse.comで提供されています、私はサイトからの重要な発見少数のものである：

IE8：最小/最大幅/高さが使用されている場合box-sizing: border-boxを無視
IE8：position: absoluteいずれかoverflow: autoに設定すると、スクロールバーの幅は要素の幅から減算される：min-widthプロパティはbox-sizingがborder-box
IE9に設定されていてもcontent-boxに適用IE8とIE9の減少のための市場シェアとして、またはoverflow-y: scroll

、これらの問題とcaniuseに記載されている他は、将来的にはそれほど問題になります。

出典

2013-08-03 09:31:12 Turnerj

はCtrl + Cマスターのためのリンクですが、彼はテキストエリアスタイリングていない：明らかにhttp://css-tricks.com/box-sizing/ – MightyPork

を経由してPの@を！フィドルへのリンクを投稿してから、私の答えを編集するのは大ファンではありません。 ;）質問をしている人のための練習と学習の要素になりました。 – Turnerj

ああ、確かに 'textarea'をコピーしたスニペットの' .threadbit .thread'に置き換えるのは苦労しませんか？ – MightyPork

フィアフォックス開発者ツールまたはクロムのメトリックスボックスの要素からボックスモデルの幅チェックディメンションに関連する問題が発生したときは、必ず覚えておいてください。なかれそのまた表示プロパティを確認してください

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

を含めることをお勧め。要素がインラインで表示された場合、余白は&のパディング値をとりません。インラインブロックとして表示されている場合は、余白&パディングが使用されます。ここで

は、箱サイズプロパティhttp://www.paulirish.com/2012/box-sizing-border-box-ftw/

出典

2013-08-03 09:56:57

100％の幅が親のdivよりも大きい

答えて

関連する問題