0

我有如下的html脚本

            <header>
            <div id="header">
                <table class="headertable">
                    <tr>
                        <td>
                            <table class="headertable">
                                <tr>
                                    <td colspan="2">
                                        <div id="site-title" class="site-title">
                                            <img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
                                        </div>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td>
                                        <div id="fullbannerad" class="fullbannerad">
                                            <img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
                                        </div>
                                    </td>
                                    <td>
                                        <div id="halfbannerad" class="halfbannerad">
                                            <img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
                                        </div>
                                    </td>
                                 </tr>
                              </table>
                        </td>
                        <td>
                           <div class="site-logo">
                              <img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
                           </div>
                        </td>
                      </tr>
                   </table>
            </div>
        </header>

下面是css

table.headertable {
border-spacing: 0;
border-collapse:collapse;}

.headertable td {
padding:0;}

在下面的代码中，页面的 td & table(nested table) 元素之间添加了一个空格（我在 chrome 调试器中检查了这个）

<td>
   <table class="headertable">

我该如何解决这个问题？请建议。

4

2 回答 2

0

我通过使用具有浮动属性的嵌套 div 解决了这个问题。HTML5 不鼓励在布局设计中使用嵌套表格。有关更多详细信息，请参阅此链接。谢谢詹妮弗，你让我开心。

以下是我的代码更改

            <div id="header" class="clearfix">
                <div id="sitetitle" style="float:left">
                    <a href="/Publication/Config/title">
                        <img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
                    </a>
                </div>
                 <div id="logo" style="float:right">
                     <a href="/Publication/Config/logo">
                        <img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
                     </a>
                 </div>
                  <div id="bannerad" style="float:left">
                      <a href="/Publication/Config/fullbanner">
                        <img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
                       </a>
                      </div>
                    <div id="halfbannerad" style="float:right">
                        <a href="/Publication/Config/halfbanner">
                            <img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
                        </a>
                    </div>

            </div>
于 2013-03-19T04:04:14.967 回答
0

浏览器应忽略文档中的额外空白。如果您的页面布局有问题，则不是因为该位置有多余的空间。

于 2013-03-18T14:35:42.737 回答