29

動的に生成されたデータを表示するためにテーブルを使用しています。ユーザー入力に依存します。html 構造は以下のようになります。

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> //like this i set for all td in table
     <div style="position:absolute">//like this i set for all div in table
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>

ここで、div はボディの上隅に移動します。これらの上記のスタイルはすべて JavaScript を介して適用され、クロム、IE では正常に機能しますが、下の画像のように FF では機能しません。

ここに画像の説明を入力

div の位置を絶対位置から相対位置に変更すると正しく配置されますが、位置が重要であるためにユーザーが div をホバーしている間にホバー効果が発生し、この問題は firefox でのみ発生します

非常に簡単な参照については、jquery http://www.malsup.com/jquery/hoverpulse/をチェックして ください。

私はこのようにFIREFOXのテーブル内に実装する必要があります。つまり、

  • td 内に配置された各画像//<td style="position:relative;">

  • ユーザーが td にカーソルを合わせると、画像がパルスします (ズーム効果)。

  • ユーザーがホバーアウトすると、前の状態に移動する必要があります。 (通常のサイズ)

テーブル構造はすでに上で与えられています。

4

5 に答える 5

41

テーブルセルの配置には問題があります。通常の解決策は、スタイルをそのままにして、作成したスタイルをその中tdに入れるdivことですposition:relative。次に、そのdiv内にコンテンツを配置します。

<td> <!-- no style at all -->
 <div style="position:relative;">
  <div style="position:absolute"> <!-- original div -->
   <contents>
  </div>
 </div>
</td>

編集：
あなたがどの効果を求めているのかわかりませんが、ここに問題を示すjsFiddleがあります：http：//jsfiddle.net/ygP7k/5/各
テーブルセルに絶対的に配置されたdivがほとんどないテーブルがあります。右下隅に揃えるはずです。Mozilla以外のすべてのブラウザで動作します。

しかし、これは私が述べたように追加のdivを含む更新されたものです：http：//jsfiddle.net/ygP7k/7/
これは、Firefoxでもトリックを実行することを除いて、まったく同じように機能します。

これで作業できますか？これはあなたの質問に答えますか？

于 2012-04-22T11:18:40.950 に答える
8

hoverplus jQuery プラグインを調べたところ、ソース ファイルに使用されているメソッドが示されています。

// parent must be relatively positioned
this.parent().css({ position: 'relative' });

// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });

このプラグインの要件と現在の設計ニーズにより、そのような要件のない強力で使いやすい Zoom 機能を備えた.transit() jQuery プラグインを使用することをお勧めします。

それぞれ9 つの Divを持つ 2 つのTable Examplesを用意しました。マークアップからわかるように、これ以上簡単なことはありません。

テーブル内の画像を含むズームされた Div の jsFiddle DEMO

私が作成したjsFiddleを見た後、すべての.transit()プラグイン機能をデモ ページHEREで確認できます。

編集: jsFiddleには、更新ごとにtdタグのCSS スタイルが必要になりました。position:relative

于 2012-06-08T07:52:11.397 に答える
4

追加する問題を解決しましたdisplay: block; 

.table td div {
  position:absolute;
  display:block;
}

あなたの場合：

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> <!-- like this i set for all td in table -->
     <div style="position:absolute; display:block"> <!-- like this i set for all div in table -->
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>
于 2015-10-19T21:40:41.000 に答える
3

position:relative表1と2番目に2つのdivを追加する必要がありますposition:absolute

<td>
<div style="position:relative">
<div style="position:absolute">ddd</div>
</div>
</td>

あなたの問題は解決されるでしょうチェックフィドル

http://jsfiddle.net/rizwanabbasi/2hyE8/1/

于 2012-06-13T07:56:26.473 に答える
0

私も同様の問題を抱えていました。問題のある絶対divを絶対divでラップして、問題を修正しました。

    <div class="thumbnail" style="..position:relative;..">  
        <div style="position:absolute;">
        <div class="thumbnail-heart" style="..position:absolute;..">
            <img src="../image.png" style="float:right;position:relative;..">
            ...
        </div>
        </div>
于 2013-02-21T01:30:23.537 に答える