0

我有一个包含三个单元格的表格，其宽度分别为 30%、40% 和 30%。表格本身的宽度是其容器的 25%，可以从 1024 像素到 400 像素不等。

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

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

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

有人对如何解决这个问题有任何想法吗？我对第三个单元格也有同样的问题。

这只发生在Firefox中。

截图：

编辑：

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;
}
4

2 回答 2

0

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

table-layout: fixed;
于 2013-05-11T07:04:24.393 回答
0

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

于 2013-05-10T23:23:29.347 回答