表格間在表格行之間的差距

Question

我一直在努力解決這個問題幾個小時。我有一個表格行，它有三個錨點將圖片作爲按鈕包裹起來。在大多數瀏覽器中，它可以，但在Firefox和IE中，表格行與「A」標籤以及下一行表格之間存在差距。在Firefox中，這似乎是由錨定引起的，因爲當我將錨定出來時，問題就消失了。在IE中，這個問題似乎有所不同，我還沒有進一步隔離它。在這個階段，如果有人有關於如何在Firefox中解決這個問題的線索，我將非常感激。下面是受影響的錶行的代碼段：

<tr class="topcontrols" height="55"> 
    <td class="topcontrols" style="width:13px;" height="55" width="13"> 
     <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/lt_frame_corner.gif" width="13" height="55" hspace="0" vspace="0" border="0"/> 
    </td> 
    <td style="width:56px;" height="55" width="56" class="frametop"> 
     <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="56" height="55" hspace="0" vspace="0" border="0"/> 
    </td> 
    <td class="topcontrols" style="width:160px;" width="160" height="55"> 
     <a class="topcontrols" class="topcontrols" href="<?php echo $this->baseurl ?>/index.php/novazeal"> 
      <?php if($this->countModules('novazeal-home')) { ?> 
       <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_active.gif" width="160" height="55" border="0" /> 
      <?php } else { ?> 
       <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_inactive.gif" width="160" height="55" border="0" /> 
      <?php } ?> 
     </a> 
    </td> 
    <td class="servicestab" height="55" width="163"> 
     <div class="servicesdropmenu"></div> 
     <a class="topcontrols" href="<?php echo $this->baseurl ?>/index.php/novazeal/services"> 
      <?php if($this->countModules('novazeal-services')) { ?> 
       <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_active.gif" width="163" height="55" border="0" /> 
      <?php } else { ?> 
       <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_inactive.gif" width="163" height="55" border="0" /> 
      <?php } ?> 
     </a> 
    </td> 
    <td class="topcontrols" style="width:161px;" height="55" width="161"> 
     <a class="topcontrols" href="<?php echo $this->baseurl ?>/index.php/novazeal/contact"> 
      <?php if($this->countModules('novazeal-contact')) { ?> 
       <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_active.gif" width="161" height="55" border="0" /> 
      <?php } else { ?> 
       <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_inactive.gif" width="161" height="55" border="0" /> 
      <?php } ?> 
     </a> 
    </td> 
    <td class="frametop" style="width:256px;" height="55" width="256"> 
     <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="256" height="55" border="0" style="width:256px"/> 
    </td> 
    <td class="topcontrols" style="width:14px;" height="55" width="14"> 
     <img class="topcontrols" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/rt_frame_corner.gif" width="14" height="55" border="0" /> 
    </td> 
</tr> 
<tr style="height:100%;"> 
    <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/left_frame_edge.gif);"> 
    </td> 
    <td colspan="5" BGCOLOR="#ffffee" class="contentarea"> 
     <jdoc:include type="component" /> 
    </td> 
    <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/right_frame_edge.gif);"> 
    </td> 
</tr> 

，這裏是在這些行使用的CSS：

.contentarea { 
    background-color: #ffffff; 
    min-height:100%; 
    height:100%; 
    overflow:hidden; 
    position:relative; 
    vertical-align: top; 
} 

.frametop { 
    background:url(../images/frame_top.gif); 
    max-height:55px; 
    height:55px; 
    overflow:hidden; 

} 

.topcontrols { 
    position: relative; 
    max-height:55px; 
    height:55px; 
    overflow:hidden; 
} 

.servicestab { 
    position: relative; 
    max-height:55px; 
    height:55px; 
    overflow:hidden; 
    width:163px; 

} 

.servicesdropmenu { 
    -moz-transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    background-color:rgba(100,100,255,0.0); 
    height:14px; 
    width:158px; 
    position:absolute; 
    z-index: 100; 
    top:38px; 
    left:3px; 
} 

.servicestab:hover .servicesdropmenu { 
    height:100px; 
    background-color:rgba(100,100,255,0.92); 
} 

感謝您的任何想法，可能會導致一個解決方案。

Terry Rozmus。

Answer 1

使用表格佈局是一種不好的做法。嘗試使用div的CSS來代替。 它更好，一旦你掌握了它的方便和方式更容易配置。

1. 表格通常是標記的更多字節。 （更長時間下載，並且主機的更多字節流量。）
2. 表通常會阻止增量呈現。 （使用 用戶需要更長時間才能看到頁面上的任何內容。）
3. 表格可能會要求您將單個邏輯圖像切割成多個 。 （這使得重新設計總地獄，也增加了頁面加載 時間[多個HTTP請求和更多的總字節數。）
4. 表打破某些瀏覽器文本複製。（這是惱人的用戶。）
5. 表防止某些從他們的工作佈局（如 身高：100％的子元素）。 （它們限制你可以在佈局方面實際做的 。）
6. 一旦你知道CSS，基於表格的佈局通常需要更多的時間去實現 。 （稍微付出一些努力，前期學習CSS最終付出了很大努力 ）。
7. 表格在語義上是不正確的佈局標記。 （他們描述的是 的演示文稿，而不是內容。）
8. 表格讓那些使用屏幕閱讀器的人們感到難過。 （不僅 你CSS的其他好處，你也幫助了 盲/部分視力，這是一件好事。）
9. 表上的鎖，你到當前的設計，使重新設計MUCH 更難比語義HTML + CSS