firefox vị trí tuyệt đối bên trong một vấn đề chứa tương đối

Question

tôi đang sử dụng bảng để hiển thị dữ liệu tự động tạo ra của tôi phụ thuộc vào đầu vào người sử dụng cấu trúc html là trông giống như dưới đây:

<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> 

Đây div là đi vào góc trên cùng của body.all các phong cách trên được áp dụng throght javascript và làm việc tốt của nó trong chrome, IE, nhưng không phải trong FF như hình dưới đây.

nếu chúng ta thay đổi vị trí của div để tuyệt đối tương đối nó sẽ sắp xếp một cách chính xác nhưng tôi làm cho một hiệu ứng hover khi người dùng di chuột của div cho rằng các vị trí rất quan trọng và vấn đề này chỉ xảy ra trong firefox

để kiểm tra tài liệu tham khảo rất nhanh chóng bạn ra khỏi cái jquery http://www.malsup.com/jquery/hoverpulse/

tôi cần như thế này phải được thực hiện bên trong bảng trong fIREFOX có nghĩa

• Mỗi hình ảnh được đặt bên trong một td//<td style="position:relative;">

• nếu di chuột người dùng trên một td hình ảnh nên xung (Phóng to ảnh hưởng).

• Khi người dùng di chuột ra nó nên đi vào trạng thái trước đó. (Kích thước bình thường)

Các cấu trúc bảng đã được đưa ra ở trên.

Answer 1

Định vị ô bảng là vấn đề. Các giải pháp thông thường là để lại phong cách của td một mình, và đặt một div trong nó mà bạn thực hiện position:relative. Sau đó, đặt nội dung bên trong div đó.

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

Edit:
Tôi không biết tác dụng bạn đang sau, nhưng đây là một jsFiddle chứng minh vấn đề: http://jsfiddle.net/ygP7k/5/
Nó có một bảng với ít divs hoàn toàn vị trí trong mỗi ô trong bảng, có nghĩa vụ phải căn chỉnh với các góc dưới cùng bên phải. Nó hoạt động trong tất cả các trình duyệt ngoại trừ Mozilla.

Nhưng đây là bản cập nhật với số lượng div bổ sung như tôi đã đề cập: http://jsfiddle.net/ygP7k/7/
Hoạt động này giống hệt nhau, ngoại trừ việc thực hiện thủ thuật trong Firefox.

Bạn có thể làm việc với điều này không? Điều này có trả lời câu hỏi của bạn không?

Answer 2

Tôi nhìn hoverplus jQuery plugin và tập tin nguồn cho thấy phương pháp được sử dụng:

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

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

Do yêu cầu của plugin này và nhu cầu thiết kế hiện tại của bạn, tôi khuyên bạn nên sử dụng .transit() jQuery Plugin có các tính năng Thu phóng mạnh mẽ và dễ sử dụng mà không cần các yêu cầu như vậy.

tôi đã chuẩn bị hai Bảng Ví dụ, mỗi 9 Div của và như bạn có thể nhìn thấy bằng cách đánh dấu, nó không thể được bất kỳ dễ dàng hơn!

jsFiddle DEMO of Zoomed Div's with Images in Tables

Sau khi bạn có một cái nhìn tại jsFiddle tôi đã thực hiện cho bạn, bạn có thể xem tất cả .transit() tính năng plugin trên trang demo HERE.

EDIT: jsFiddle hiện đã yêu cầu kiểu CSS cho td thẻ của position:relative cho mỗi lần cập nhật của bạn.

Answer 3

bạn phải thêm 2 div trong Bảng 1 với position:relative và thứ 2 với position:absolute

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

vấn đề của bạn sẽ được giải quyết séc fiddle

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

Answer 4

Tôi đã có một vấn đề tương tự. Tôi quấn div tuyệt đối có vấn đề trong một div tuyệt đối mà cố định vấn đề:

<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> 

Answer 5

tôi giải quyết vấn đề thêm display: block;

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

trong trường hợp của bạn:

<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>