html - 为什么我的 iframe 上方和下方有一个白色条？

Question

我正在尝试将 iframe 放置在描绘圆形边框的区域中。为了做到这一点，我使用了 HTML 表格。我的内容显示如我所愿，但 iframe 上方和下方有一个白条。我不确定为什么会这样。这是我的代码:

<table border="0" cellpadding="0" cellspacing="0" style="width:640px;">
  <tr>
    <td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:6pt;"><img alt="" src="c1.png" style="width:12px; height:12px; vertical-align:top;" /></td>
    <td class="height:12px; vertical-align:top;"><div style="background-color:silver; height:12x;">&nbsp;</div></td>
    <td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:8pt;"><img alt="" src="c2.png" style="width:12px; height:12px; vertical-align:top;" /></td>
  </tr>
  <tr>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
    <td style="background-color:silver; font-size:6pt;"><iframe id="myIframe" frameborder="0" style="border:0px; overflow:visible; width:100%;" width="100%" src="/Test.aspx" scrolling="no"></iframe></td>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
  </tr>
  <tr>
    <td style="background-color:silver; font-size:6pt;"><img alt="" src="c3.png" 
      style="width:12px; height:12px; vertical-align:bottom;" /></td>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
    <td style="background-color:silver; font-size:6pt;"><img alt="" src="c4.png"    
      style="width:12px; height:12px; vertical-align:bottom;" /></td>
  </tr>
</table>

有人能告诉我如何去除白色 strip 吗？谢谢!

Answer 1

我认为问题是在你的中间单元格中，你的“文本”(不间断空格)比行高应该高。

此外，您有一个 class 属性而不是 style。

这个简化的代码对你有用吗？如果我理解正确你的意图是什么......

<table style="border-collapse: collapse; width:640px;" cellpadding="0">
  <tr>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c1.png" style="width:12px; height:12px;" /></td>
    <td style="background-color: silver; height:12px;"></td>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c2.png" style="width:12px; height:12px;" /></td>
  </tr>
  <tr>
    <td style="background-color: silver;"></td>
    <td style="background-color: silver;"><iframe id="myIframe" style="border: none; overflow:visible; width:100%;" src="/Test.aspx" scrolling="no"></iframe></td>
    <td style="background-color: silver;"></td>
  </tr>
  <tr>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c3.png" style="width:12px; height:12px;" /></td>
    <td style="background-color: silver; height:12px;"></td>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c4.png" style="width:12px; height:12px;" /></td>
  </tr>
</table>