邊框塌陷不起作用

Question

jsFiddle demo

從上面的演示可以看到邊框不塌陷！我是新來的這一點，不知道爲什麼，任何幫助將不勝感激

HTML

<table> 
    <tr> 
     <td><img src="images/new24/_landing/profile_slideout/contactme_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/bouncerate_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/analyseme_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/socialme_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/locateme_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/dailybubble_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/bouncedon_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/followme_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/exhibitormode_icon.png"/></td> 
     <td><img src="images/new24/_landing/profile_slideout/treatsprofile_icon.png"/></td> 
    </tr> 
</table> 

CSS

table { 
    border-collapse: collapse; 
} 

td { 

    border: 1px solid red; 
    background: blue; 
    width: 129px; 
    height: 116px; 
    float: left; 
    position: relative; 
    padding: 20px; 
} 

Answer 1

我建議你標記，你的內容是這樣的：

<ul> 
    <li><img src="images/new24/_landing/profile_slideout/contactme_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/bouncerate_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/analyseme_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/socialme_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/locateme_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/dailybubble_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/bouncedon_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/followme_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/exhibitormode_icon.png"/></li> 
    <li><img src="images/new24/_landing/profile_slideout/treatsprofile_icon.png"/></li> 
</ul> 

...並且還考慮將alt屬性添加到每個圖像。

你的CSS是這樣的：

li { 
    border: 1px solid red; 
    background: blue; 
    width: 129px; 
    height: 116px; 
    float: left; 
    padding: 20px; 
    margin: -1px 0 0 -1px; 
} 

要保留頂部和左邊框，補充一點：

ul { 
    margin: 1px 0 0 1px; 
} 

margin屬性是導致邊界崩潰在這一個系列元素。

Here is a jsFiddle example。

Answer 2

移動你的背景：藍色成表元素和註釋掉崩潰

table { 
XXborder-collapse: collapse; 
background: blue; 

}

td { 
border: 1px solid red; 
width: 129px; 
height: 116px; 
float: left; 
position: relative; 
padding: 20px; 

}

也取消選中標準化CSS，你會看到它正在工作，但可能不像你想象的那樣。

Answer 3

因爲你每次浮動TD元件您正在引起的TD像由渲染器而不是作爲表細胞塊元素進行處理。塊元素沒有邊界崩潰的概念。

http://www.w3.org/TR/CSS21/visuren.html#block-formatting http://www.w3.org/TR/CSS2/visuren.html#float-position