Question

正如您从上面的演示中看到的那样，边框不会崩溃！我是新手，不知道为什么，任何帮助都会非常感激

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

因为浮动每个TD元素，导致TD被渲染器处理为块元素而不是表格单元格。块元素没有边界崩溃的概念。

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

Answer 3

移动你的背景：蓝色到表格元素并注释崩溃

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

}

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

}

另外，取消选中规范化的CSS ，您会看到它正在运行，但可能与您想的不一样。

边境崩溃不起作用

3 个答案: