具有背景颜色和透明图像的HTML表:底部的边框

Question

我正在制作一个水平菜单的按钮，需要有一个背景色在他们后面。按钮图像是一个白色的盒子，中间有一个透明的圆圈，在那里颜色会显示出来。

实际的按钮图像将更加复杂，所以我不能只是编码按钮。

该方法适用于px中的图像宽度设置。但是，当我将图像宽度设置为100%，以使所有的移动响应，我得到蓝色边框在每个按钮的底部边缘。

有时也会出现在其他边缘：铬屏幕截图示例

下面是一个JSFiddle链接：https://jsfiddle.net/3e4xv37d/#&togetherjs=tatfPi7B6n

代码片段：

​

@media only screen and (max-width: 600px) {
body[yahoofix] body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
body[yahoofix] table {
width: 100% !important;
border-collapse: collapse !important;
}
body[yahoofix] #hidden {
display: none;
}
body[yahoofix] #hidden-2 {
display: none;
}
body[yahoofix] #hidden-3 {
display: none;
}

<table align="center" border="0" cellpadding="0" cellspacing="0" width="700">
	<tbody>
		<tr>
		<td valign="top">
			<table border="0" cellpadding="0" cellspacing="0" width="100%">
				<tbody>
					<tr>
					<td>
						<table border="0" cellpadding="0" cellspacing="0" width="480px" align="center">
							<tbody>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
								<td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
							</tbody>
                        </table>

					</td>
                    </tr>
				</tbody>
			</table>
		</td>
		</tr>
	</tbody>
</table>

​

谢谢您的建议。一直在到处寻找，找不到任何讨论如何使这种类型的图像工作在响应的布局。

Answer 1

最可能的原因是，您试图将宽度除以一些不均匀可除的项。你的小提琴在Chrome中为我工作，这很有意义，因为480 /6=80 no，所以没有边框。如果要生成宽度481，则有5个单元格为80 If，一个单元格为81 If(单元格必须“在”一个像素上)。因为图像设置为100%宽度，这使得81 1px单元格中的图像也稍微高一些，并使整个表行高出1 1px。但是由于80 px单元格中的图像是旧的高度，它似乎在底部填充上增加了一个额外的px。

所有这些嵌套表都会导致问题。就布局而言，我会回到画板上去。为什么不简单地拥有一个带有多个<div>的<button>呢？

Answer 2

您在表中丢失了带有图像的<tr>标记，可能会有所帮助，但我注意到的第一件事就是。我还会将style="display:block;"添加到每个图像中，以使其填充td单元格。