Question

我有这个代码，当它显示时，右边有一条奇怪的垂直线。我无法弄清楚可能导致它的原因。任何帮助将不胜感激。

enter image description here

这是我正在使用的完整代码。

<html>
<head></head>
<body>

<table border="0" width="600" align="center" cellpadding="0" cellspacing="0" title="Join us!">
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15"><img src="topleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: .2em">&nbsp;</td>
<td width="15"><img src="righttop.jpg" width="15" height="15" alt=""></td>
</tr>

<tr bgcolor="#8cc63f">
<td width="15" style="font-size: 1px">&nbsp;</td>
<td width="410" bgcolor="#8cc63f" align="center" style="color: white; font-size: 16px">
<span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
    <a href="http://www.google.com"><br> We have spacious and modern training rooms. <br><br></span></td>
<td width="15" style="font-size: 1px;">&nbsp;</td>

</tr>
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15" height="15"><img src="buttomleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: 0px;" height="15"></td>

<td width="15" height="15"><img src="buttomright.jpg" width="15" height="15" alt=""></td></tr>
</table>
</body>
</html>

Answer 1

你可能想要考虑整合CSS3圆角，而不必敲打一堆代码。只需尝试谷歌搜索就可以了！

Answer 2

这是由于你的宽度不对。

变化：

<table border="0" width="600" align="center" cellpadding="0" cellspacing="0" title="Join us!">

到

<table border="0" width="430" align="center" cellpadding="0" cellspacing="0" title="Join us!">

（减去角落图形）的工作示例：http://jsfiddle.net/GuuLs/

如果您希望宽度为600px，则需要将中间td（当前为410）的宽度修改为570.

Answer 3

中间单元应该是570宽度，这将解决问题。但是，我不会以这种方式解决这个问题。相反，我只想使用css将背景图像设置为top right, bottom right, top left, bottom left。

HTML中的圆角

3 个答案: