與盒子模型的故障

Question

我有一個容器，我打電話＃profile-grid，我希望它是330px寬。它包含一個330像素寬的圖像和一個330像素寬的圖像下方的內聯列表，並且周圍有1px的邊框。我希望列表和圖像的寬度完全相同。在IE中它排列完美，但在Chrome中它太短了2px。我究竟做錯了什麼？ http://jsfiddle.net/ZPQUP/13/

Answer 1

問題是，正如您的標題所示，盒模型。

最好的辦法是明確地設置盒子模型，然後使用polyfill使其適用於舊版瀏覽器。保羅愛爾蘭描述問題和解決方案在這裏：http://paulirish.com/2012/box-sizing-border-box-ftw/

我展示一下這個看起來像一個更新的提琴在這裏：http://jsfiddle.net/mstauffer/ZPQUP/14/

從本質上講，不同箱的型號是否不同邊界和補白是列入或外部添加到的寬度。

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>）將是298px寬+ 1px左邊界+ 1px右邊界。

• 另一方面，爲其指定寬度將排除計數中的邊界，從而導致溢出。

• 給display:block和width:100%也做同樣的事情，再加上它保留了圖像比例（而不是壓扁以任何方式）的圖像

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像素（即298px）的寬度，並且所有東西都會排成一行...

...在好的瀏覽器中。在舊版本的IE中，您會看到一個問題。使用有效的DOCTYPE，這將被解決。