0

在Toggle Squares页面中，我在 JavaScript 生成的每个单元格中都有一个由 <img /> 组成的表格。我应用了以下 CSS：

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

为了消除所有的间距。但是，现在我在两个相邻行之间得到了一条细的背景线。我怎样才能消除它？

该页面是有效的 XHTML + CSS。

谢谢你的帮助。

问候，

什洛米鱼。

将 cellpadding="0" 和 cellspacing="0" 属性添加到表中，或尝试使用

border-collapse: collapse; 
border-width: 0;

在 css..

4

5 回答 5

5

将 cellpadding="0" 和 cellspacing="0" 属性添加到表中，或尝试使用

border-collapse: collapse; 
border-width: 0;

在 css..

于 2009-05-12T19:38:25.050 回答
3 
.game td img {
 display: block;
}

图像带有自己的空白

于 2009-05-12T19:43:53.000 回答
1

固定的：

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
于 2009-05-12T19:43:17.663 回答
1

问题是：内联图像被视为一个字母，上升 = 图像的高度，下降 = 字体的下降。这意味着仅包含图像的表格单元格的高度大于图像高度。

解决这个问题的最简单方法是将整个表格的 line-height 设置为零，从而抑制文本行中的下降或设置 display: block 所有图像，从而将它们从行内格式化上下文中移出到块格式化上下文中。

于 2009-05-12T19:48:28.920 回答
0

我能够使用以下代码获得您正在寻找的效果：

该代码描绘了四个纯色 jpeg 彼此相邻，形成一个正方形，中间没有空格：

<html>
<head>
    <style>
        td { margin 0px; padding: 0px;}
        table { border-collapse:collapse;}
    </style>
</head>
<body>
    <table>
        <thead />
        <tbody>
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>                   
            <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
        </tbody>
    </table>
</body>

于 2009-05-12T19:44:58.690 回答