Question

我有一张我已经分手的图像，所以当你将鼠标悬停在某些部分上时，某些报价泡泡将变得更大，更容易阅读。由于我打破了图像，我把这些碎片放在桌子上。我设法摆脱了2列之间的边界，但我无法弄清楚如何摆脱行之间的边界。我在border=0, cellspacing=0, cellpadding=0, border=none和<td>标记上尝试了<tr>，但它不起作用。有人可以帮我弄清楚如何摆脱桌子行之间的这些白线，以便我的图像能够融合在一起吗？

＆＃13;

/* Quote Image and Table */
table { 
	border: none;
	border-collapse: collapse;
}

tr, td {
	margin: 0;
	padding: 0;
	border: 0;
}

#picture {
	width:100%; 
	height: auto;
}

#picture a.small, #picture a.small:visited { 
	display:block; 
	width:100%; 
	height:auto; 
	text-decoration:none; 
	background:#ffffff; 
	top:0; 
	left:0; 
	border:0;
}

#picture a img {
	border:0;
}

#picture a.small:hover {
	text-decoration:none; 
	background-color:#000000; 
	color:#000000;
}

#picture a .large {
	display:block; 
	position:absolute; 
	width:0; 
	height:0; 
	border:0; 
	top:0; 
	left:0;
}

#picture a.small:hover .large {
	display:block; 
	position:absolute; 
	top: 90px; 
	left:150px; 
	width:80%; 
	height:auto; 
}
/* Quote Image and Table */

＆＃13;

<div id="picture">
<center>
<table cellspacing="0" cellpadding="0">
  <tr style="border:0;">
    <td style="border:0;"><a class="small" href="#nogo" title="small image"><img src="images/quote1.jpg" title="small image" />
<img class="large" src="images/quote1.png" title="large image" /></a></td>
    <td style="border:0;"><a class="small" href="#nogo" title="small image"><img src="images/quote2.jpg" title="small image" />
<img class="large" src="images/quote2.png" title="large image" /></a></td> 
  </tr>
  
  <tr style="border:0;">
    <td style="border:0;"><a class="small" href="#nogo" title="small image"><img src="images/quote3.jpg" title="small image" />
<img class="large" src="images/quote3.png" title="large image" /></a></td>
    <td style="border:0;"><a class="small" href="#nogo" title="small image"><img src="images/quote4.jpg" title="small image" />
<img class="large" src="images/quote4.png" title="large image" /></a></td> 
  </tr>
  
    <tr>
    <td><a class="small" href="#nogo" title="small image"><img src="images/quote5.jpg" title="small image" />
<img class="large" src="images/quote5.png" title="large image" /></a></td>
    <td><a class="small" href="#nogo" title="small image"><img src="images/quote6.jpg" title="small image" />
<img class="large" src="images/quote6.png" title="large image" /></a></td> 
  </tr>
  
    <tr>
    <td><a class="small" href="#nogo" title="small image"><img src="images/quote7.jpg" title="small image" />
<img class="large" src="images/quote7.png" title="large image" /></a></td>
    <td><a class="small" href="#nogo" title="small image"><img src="images/quote8.jpg" title="small image" />
<img class="large" src="images/quote8.png" title="large image" /></a></td> 
  </tr>
</table>
</center>
</div>

＆＃13;

Answer 1

如果您在谈论行之间的空格是由a内的td标记引起的。默认情况下，此标记在line-height中有一些值，在这种情况下超过图像的高度。

尝试更改

a.small {
   line-height:0;
}

Answer 2

你的代码很适合你的要求，行之间没有白线或空格，如果你看到白线那么可能是你的图像中的一行，那么就没有什么可以处理css

Answer 3

JsBin with a simplified example playground

只需添加：

#picture a img {
    border:0;
    vertical-align:middle; /* THIS LINE */
}

如何删除表中行之间的边框？

3 个答案: