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 = 80px，所以没有边框。如果你要制作宽度481，那么你有五个80px的单元格和一个81px的单元格（单元格必须“在一个像素上”）。因为图像设置为100％宽度，这使得81px单元格中的图像也略高，并使整个表格行高1px。但是因为80px单元格中的图像是旧的高度，所以它似乎为底部填充添加了额外的px。

所有这些嵌套表都会导致问题。就布局而言，我会回到绘图板。为什么不简单地将<div>与<button>并排放在一起？

Answer 2

你在图表中遗漏了<tr>个标签，可能有所帮助，但我注意到的第一件事。我还要为每个图像添加style="display:block;"以使其填写td单元格。

带有背景颜色和透明图像的HTML表格：底部边框

2 个答案: