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>

有人能告诉我如何摆脱白条吗？谢谢！

Answer 1

我建议在Firefox中使用Firebug（或Chrome中的“Elements”开发人员工具）来检查你的html元素，看看哪个元素占用了那个空间。如果您可以列出哪些浏览器显示问题，这对于这些问题也很有帮助。它也可能更适合doctype.com。

Answer 2

我认为问题是在你的中间单元格中，你的“文本”（非破坏空间）比行高应该高。

此外，您有一个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>

为什么iframe上方和下方都有白条？

2 个答案: