具有背景颜色和透明图像的 HTML 表格 : border on bottom

Question

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

实际的按钮图像会更复杂，所以我不能只对按钮进行编码。

此方法适用于以 px 为单位设置的图像宽度。但是，当我将图像宽度设置为 100% 以使所有内容都具有移动响应能力时，每个按钮的底部边缘都会出现蓝色边框。

有时在其他边缘也是如此:Screenshot example from chrome

这是一个 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

很可能是因为您正试图将一个宽度除以多个不可整除的元素。你的 fiddle 在 Chrome 中对我有用，这是有道理的，因为 480/6 = 80px，所以没有边框。如果您将宽度设置为 481，那么您将得到五个 80px 的单元格和一个 81px 的单元格(这些单元格必须位于一个像素“上”)。因为图像设置为 100% 宽度，这使得 81px 单元格中的图像也稍微高一些，并使整个表格行额外高 1px。但是因为 80px 单元格中的图像是旧高度，所以它似乎在 bottom padding 中添加了额外的 px。

所有这些嵌套表格都会导致问题。就布局而言，我会回到绘图板。为什么不简单地拥有一个 <div>有几个<button>是并排的吗？