Question

我有一张三个格子的桌子，宽度分别为30％，40％和30％。表本身的宽度为其容器的25％，可以在1024px到400px之间变化。

第一个单元格是一个显示GALLERY的按钮。在悬停（td）时，它的文本变为“＆lt;”，（通过jquery）。

问题是当表被压缩时（即：容器小于，比如600px），并且我将鼠标悬停在GALLERY按钮上，单元格的宽度会发生变化（因为它的html现在只是一个“＆lt; ;“）。这导致鼠标悬停区域被推开，并且单元格在悬停状态之间快速来回切换。

定义了单元格的宽度，没有填充或边距，并且溢出：隐藏打开。

任何人对如何解决这个问题都有任何想法？我也得到了与第三个细胞相同的问题。

这只发生在firefox中。

截图：

normal：http://i.imgur.com/5pZivit.png
悬停：http://i.imgur.com/O8wEMuh.png

编辑：

jquery的

$('td.back').hover(
    function() {
        $(this).empty().html('<').addClass("hover");
    },
    function() {
        $(this).empty().html('GALLERY').removeClass("hover");
    });

HTML

<table id="toolbar" style="display:none;">
      <tr>
        <td class="back" onclick="<?php 
          if ($gallery_id == "2") echo "goToGallery(1);";
          else echo "goToIndex();";
          ?>">GALLERY
      </td>

CSS

#toolbar td {
font-family:'helvetica',sans-serif;
font-size:11px;
color:white;
text-align:center;
cursor:pointer;
overflow:hidden;
-webkit-font-smoothing:antialiased;
}

#toolbar td.back {
width:30%;
}

#toolbar td.back:hover {
color:#e61b23;
}

Answer 1

这是因为表格不是固定宽度，因此当您将单元格内容更改为“＆lt;”时，td（和表格）会变小。即，您的td是表格宽度的30％，其宽度随着内容的变化而变化。所以它可能从100px宽表的30％开始，然后更改为40px宽表的30％（例如，那些不是真正的px值），它会随宽度变化来回敲击你的内容。将表格或td设置为固定宽度，你就会很好。您还可以在td中放置一个固定宽度的div，以便单元格可以展开或收缩，但不会让内容反弹。

Answer 2

我同意bbird版本正在发生的事情。作为修复，我建议在表中添加以下CSS属性：

table-layout: fixed;

mouseover制作表格细胞疯狂

2 个答案: