0

幅がそれぞれ 30%、40%、30% の 3 つのセルを含むテーブルがあります。テーブル自体の幅はコンテナーの 25% で、1024px から 400px まで変化します。

最初のセルは GALLERY と書かれたボタンです。（tdの）ホバーすると、そのテキストが「<」に変わります（jqueryを介して）。

問題は、テーブルが圧縮されている場合 (つまり、コンテナーが 600px より小さい場合)、[ギャラリー] ボタンにカーソルを合わせると、セルの幅が変化することです (その html が単なる "<" であるため)。これにより、マウスオーバー領域が押しのけられ、セルがホバー状態の間をすばやく行き来します。

セルの幅が定義されており、パディングやマージンはなく、overflow:hidden がオンになっています。

誰でもこれを修正する方法について何か考えがありますか? 3番目のセルでも同じ問題が発生します。

これは 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% であり、その幅はコンテンツによって変化します。したがって、幅 100 ピクセルのテーブルの 30% から始まり、幅 40 ピクセルのテーブルの 30% に変更される場合があります (たとえば、これらは実際の px 値ではありません)。これにより、幅の変更に伴ってコンテンツが前後に移動します。テーブルまたは td を固定幅に設定すれば、問題ありません。td 内に固定幅の div を配置して、セルを拡大または縮小できますが、コンテンツが跳ね返らないようにすることもできます。

于 2013-05-10T23:23:29.347 に答える