HTML table 具有背景颜色和透明图像：底部边框

Question

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

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

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

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

这是一个 JSFiddle link：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 的单元格（这些单元格必须是 "on" 个像素）。因为图像设置为 100% 宽度，这使得 81px 单元格中的图像也稍微高一些，并使整个 table 行额外高 1px。但是因为80px单元格里的图片是原来的高度，所以好像要给bottom padding多一个px。

所有这些嵌套的 table 都会导致问题。就布局而言，我会回到绘图板。为什么不简单地让 <div> 并排放置多个 <button>？

Answer 2

您在图像的 table 中缺少 <tr> 标签，这可能会有所帮助，但这只是我注意到的第一件事。我还会将 style="display:block;" 添加到每个图像以使其填充 td 单元格。

HTML table 具有背景颜色和透明图像：底部边框

HTML table with background color and transparent image: border on bottom

html

css

email

html-email