边框塌陷不起作用

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