2011-08-31 19 views
9

td öğesinde kesinlikle konumlandırılmış içerik kullanılırken bir sorun buldum. td öğesi, konumlandırılmış bir öğe olarak tanınmıyor, dolayısıyla içerik body'a göre konumlandırılıyor. Bu sorun yalnızca FireFox'ta ve beklenen düzen diğer tarayıcılarda görülebilir - jsfiddle.Ekrandaki Firefox sorunu: bir tablo hücresinde mutlak

Etrafında küçük bir kazma yapmak, sorunun tablo hücreleri için varsayılan görüntüleme türü olarak display:table-cell kullanarak FireFox ile ilgili olduğu görülmektedir. Ekranı block olarak değiştirerek veya içeriğe konumlandırılmış bir kap olarak hareket etmek için div kapsayıcı ekleyerek sorunu çözebilirim.

Hücrenin görüntüleme türünü block olarak değiştirmekten kaçınmanın bir nedeni var mı? Bir tarayıcıda bir sorunu düzeltmek için ek öğeler eklemek yerine bu yöntemi kullanmayı tercih ederim. Bu, div style absolute in a table cell veya Why "display: table-cell" is broken when "position: absolute"'da açıklandığı gibi aynı sorun değildir.

+0

+1 Aynı problemi birkaç gün önce yaşadım, yapmaya çalıştığım şeyi değiştirmek zorunda kaldım. –

+0

@ric_bfa - Bu, neyi tetiklediğini bildiğimden başka bir şeyden daha rahatsız. IE7'nin bile beklendiği gibi davrandığında ve FireFox'un yapmadığı zaman dünyanın sonuna geldiğini düşündüm. – detaylor

+0

burada aynı, IE = çalışmanın, diğerlerinin kesinlikle daha iyisini yapacak, ama bu durumda, büyük bir sürpriz oldu. –

cevap

11

Hücrenin görüntüsünü block olarak ayarlarsanız, anonim bir tablo hücresine sarılır. Ortaya çıkan CSS kutusu ağacı, hücrenin içinde bir <div> oluşturduysanız ve bu hücrede tüm hücrenin stillerini ve niteliklerini ayarladığınızla aynıdır.

Bu, birçok amaç için geçerli olabilir. Hücrenin bir rowspan veya colspan'ı varsa (bunlar bloklarda bir şey ifade etmediği için) veya hücrenin kenarlık çökmesine katılmayı beklediğiniz sınır stillerine sahipse veya birbirinin yanında iki hücre varsa (Daha sonra iki blok, iki ayrı tablo hücresinde değil, tek tablo hücresine sarılacaktır). Davranışın beklenmedik olacağı başka durumlar da vardır. Ancak stil ve içerik üzerinde yeterince kontrole sahipseniz ve hücrenin fazla stilini yapmıyorsanız, bu işe yarayacaktır.

+0

Teşekkürler, harika cevap. Eğer diğer hücreler iki satıra sarılırsa, o zaman “display: block” olan hücrenin beklediğiniz gibi genişlemediğini fark ettim. – detaylor

+0

@Boris Zbarsky: rowspan ve colspan kullanımıyla ilgili herhangi bir düzeltme sorunu var mı? – krish

+0

Bildiğim kadarıyla, hücrenizin içine gerçek bir blok koymanın ve 'position: relative 'stilini buna eklemenin kısa bir yoludur. Veya Firefox, ilgili hatayı düzeltir, elbette. –

-2

TD'nin konumunu açıkça göreceli olarak ayarlamayı denediniz mi?

Bu, konumlandırmayı sıfırlamalıdır. Aslında, aldığınız şey doğru davranış ve sadece TD ile ilgili olmamalı, ama bilirsin, tarayıcılar eğlencelidir.

açıkça ayarlamak neden ihtiyaç ilgili ayrıntılar için

kontrol edin:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

..

Güncelleme: Bu cevap bir seçenek çalışırken önerdi

. , kabul edilen yanıttan daha erken yazılmış ve sadece arşivleme sebepleri için ve arama motorlarından biraz benzer ama aynı sorun için gelenler için başka bir ilgili olasılık olduğu için silinmez. Anlayışınızı takdir ediyorum.

+1

evet, 'td' konumu açıkça "göreli" olarak ayarlanmış. FireFox dışındaki tüm tarayıcılar, içeriği 'td', FF konumlarına göre 'vücut' durumuna göre konumlandırır. 'pozisyon: tablo-hücresi' 'td' bir offset ebeveyn olmaktan çıkıyor. – detaylor

+2

Aynı konuya sahibim. Firefox dışındaki tüm tarayıcılar "position: mutute;" En yakın "içerik: göreceli" ile ilgili içerik ebeveyn, ancak nesne "ekran: tablo hücresi" içeriyorsa firefox bunu görmezden gelir ve vücut ile ilgili mutlak içeriği ayarlar. Can sıkıcı. –

İlgili konular