Question

我几个小时一直在努力解决这个问题。我有一个表行，有三个锚点围绕图像作为按钮。在大多数浏览器中它还可以，但在Firefox和IE中，表格行与“A＆＃39;”之间存在差距。标签和下一个表格向下排。在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代替。这样做会更好，一旦你更容易掌握它，并且更容易配置。

表通常是更多字节的标记。（更长时间下载，和主机的更多字节流量。）
表通常会阻止增量呈现。（需要更长的时间用户可以在页面上看到任何内容。）
表格可能要求您将单个逻辑图像切割成多个那些。（这使得重新设计完全地狱，并且还增加了页面加载时间[更多的http请求和更多的总字节数]。）
表格在某些浏览器上打破文本复制。（这对用户来说很烦人。）
表会阻止某些布局在其中工作（例如高度：100％的子元素）。（他们限制你的能力实际上就布局而言。）
一旦你了解CSS，基于表格的布局通常需要更多时间实行。（一点点努力前期学习CSS得到了很大的回报最后。）
表格在布局上是语义上不正确的标记。（他们形容演示文稿，而不是内容。）
桌子让使用屏幕阅读器的人感到生气。（不仅如此你获得了CSS的其他好处，你也可以帮助你盲/部分近视。这是件好事。）
桌子锁定您当前的设计并重新设计很多比语义HTML + CSS更难

表格行中的Firefox中的表格中的差距

1 个答案: