ボックスモデルの問題

Question

私は＃profile-gridと呼んでいるコンテナを持っていて、それを330px幅にします。それには、幅330ピクセルの画像と、幅330ピクセルの画像の下にインラインのリストがあり、1ピクセルの境界線があります。私はリストと画像がまったく同じ幅になるようにしたい。 IEでは完全に整列していますが、Chromeでは2pxが短すぎます。私は間違って何をしていますか？ http://jsfiddle.net/ZPQUP/13/

Answer 1

問題は、タイトルが示唆しているように、箱型モデルです。

ボックスモデルを明示的に設定し、古いブラウザで動作させるには、ポリフィルを使用するのが最善です。 http://jsfiddle.net/mstauffer/ZPQUP/14/

基本的に、異なるボックスモデルはボーダーかどうかで異なり、パディングがに含まれています：http://paulirish.com/2012/box-sizing-border-box-ftw/

私は、これはここで更新フィドルにどのように見えるかを示してきました：ポール・アイリッシュは、問題と、ここで解決策を説明しますまたはを外部に追加すると、幅がになります。

Answer 2

DEMO：

HTML：

<div id="profile-grid"> 
    <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/> 
    <ul id="listed"> 
      <li class="item"><a href="#"> Profile </a></li> 
      <li class="item"><a href="#"> About </a></li> 
      <li class="item"><a href="#"> Photos </a></li> 
      <li class="item"><a href="#"> Albumlist </a></li> 
     </ul>  
</div>​ 

はCSS：

#profile-grid { 
    height: 302px; 
    width: 330px; 
} 

#profile-grid img { 
    display: block; 
    width: 100%; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
} 

#listed { 
    height: 50px; 
    border: 1px solid #ddd; 
    overflow: hidden; 
} 

li.item { 
    margin: 0px; 
    display: inline; 
    float: left; 
    height: 50px; 
    border-left: 1px solid #ddd; 
    display: inline; 
} 

#listed li a { 
    display: block; 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 15px; 
    color: #123454; 
    line-height: 50px; 
    padding: 0px 15px 0; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: baseline; 
} 

#listed li a:hover{ 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 15px; 
    color: white; 
    background-color: #123454; 
    text-align: center; 
    text-decoration: none; 
} 

NOTES：

• <ul>はブロック要素です。親の幅にかかわらず、それはそれと共に成長する。自動100％の一種。親に330pxを渡すと、330pxにもなります。

• ブロック要素が指定された幅を持たない限り、100％の幅には境界が含まれます。したがって、330pxの親がある場合、ブロック要素（この場合は<ul>）は、幅298pixel + 1px左境界+ 1px右境界になります。一方、幅を指定すると、カウント内の罫線、つまりオーバーフローが除外されます。画像にdisplay:blockとwidth:100%を与える

• も同じことを行いPLUSそれは、この問題を回避するには画像比率（とない任意の方法でそれをつぶし）

Answer 3

を保持し、それがあります同じ要素にwidthとpaddingまたはborderを混ぜないと理想的です。あなたのケースでは

、あなたは、単に.listedからwidth: 330pxを削除し、代わりに.listed ulにそれを追加した場合、あなたは問題ないはずです。

#listed { 
    display: block; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    height: 50px; 
    overflow: hidden; 
    border: 1px solid #ddd; 
} 



#listed ul { 
    margin: 0px 0px 0px -1px; 
    padding: 0px 0px 0px 0px; 
    overflow: hidden; 
    width: 330px; 
} 

Answer 4

あなたdiv#listedが330px幅のプラス境界の 1つのピクセル側のどちらかであります。それが「標準」ボックスモデルの仕組みです。幅を各辺で1ピクセル（つまり298ピクセル）小さくし、すべてが整列します。

...良いブラウザで。古いバージョンのIEでは、問題が発生します。有効なDOCTYPEを使用すると解決されます。