1

我已经在这个问题上苦苦挣扎了几个小时。我有一个表格行，其中包含三个围绕图像作为按钮的锚点。在大多数浏览器中它还可以，但在 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);
}

提前感谢任何可能导致解决方案的想法。

特里·罗兹穆斯。

4

1 回答 1

1

使用表格进行布局是一种不好的做法。尝试将 div 与 css 一起使用。它会更好，一旦你掌握了它的窍门，它就更容易、更可配置了。

  1. 表通常是更多字节的标记。（下载时间更长，主机流量更大。）
  2. 表格通常会阻止增量渲染。（用户需要更长的时间才能看到页面上的任何内容。）
  3. 表格可能需要您将单个逻辑图像分割成多个图像。（这使得重新设计完全是地狱，并且还增加了页面加载时间[更多的 http 请求和更多的总字节数]。）
  4. 表格会破坏某些浏览器上的文本复制。（这对用户来说很烦人。）
  5. 表格会阻止某些布局在其中工作（例如 height:100% 的子元素）。（它们限制了您在布局方面实际可以做的事情。）
  6. 一旦你了解了 CSS，基于表格的布局通常需要更多的时间来实现。（前期学习 CSS 的一点努力最终会获得丰厚的回报。）
  7. 表格在语义上是不正确的布局标记。（他们描述的是演示文稿，而不是内容。）
  8. 对于那些使用屏幕阅读器的人来说，表格让他们的生活变得很糟糕。（您不仅可以获得 CSS 的其他好处，还可以帮助盲人/有视力障碍的人。这是一件好事。）
  9. 表格将您锁​​定在当前设计中，使重新设计比语义 HTML+CSS 更难
于 2012-04-24T10:55:21.717 回答