Firefox'ta bu TinyMCE editörünün konumunu nasıl düzeltebilirim?

Bir TinyMCE editörünü CSS kullanarak kesin olarak konumlandırmaya çalışıyorum. Chrome'da bu iyi çalışıyor. Ancak Firefox'ta editör kaybolur. Ben karmaşık bir uygulamada yapıyorum ama çok basit bir test durumu ile çoğaltmak başardı:Firefox'ta bu TinyMCE editörünün konumunu nasıl düzeltebilirim?

<style type='text/css'> 
    div.container { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    min-height: 600px; 
} 

div.container div.text { 
    border: 1px dashed black; 
    overflow: hidden; 
} 


div.container div.text div.mceIframeContainer { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

    </style> 



<script type='text/javascript'>//<![CDATA[ 
Event.observe(window, "load", function(){ 

function setup() 
{ 
    var myTinyMCESettings = { 
     mode: 'none', 
     width: '100%', 
     height: '9000px', 
     body_class: 'TypeRegion' 
    }; 

    var editorId = $(document.body).down('div.container div.text div.editor').identify(); 

    tinyMCE.init(myTinyMCESettings); 

    tinyMCE.execCommand("mceAddControl", true, editorId); 
} 

setup(); 

});//]]> 

</script> 


</head> 
<body> 
    <div class="container"> 
    <div class="text" style="position:absolute;top: 2in; left:2in; width: 2in; height: 3in;"> 
     <div class="editor">Enter text here</div> 
    </div> 
</div>

Here is a JSFiddle for this test case. Chrome'u Firefox ile karşılaştırın, editörün firefox'ta görünüşte eksik kaldığını unutmayın ... buna neden olan nedir ve bunu nasıl düzeltebilirim?I tried making the td have relative positioning, değişiklik yok: GÜNCELLEME

div.container div.text table tr td { position: relative; }

kaynak

2012-06-15 Josh

Gerçekten div.container div.text div.mceIframeContainer' için css'ye ihtiyacınız var mı? Bu tarz olmadan çalışır ve aynı sonucu gösterir. Ve her iki tarayıcıda da çalışır. – Smileek

@Smileek TinyMCE editörünü tam olarak konumlandırmam gerekiyor, aksi halde, 'un üst kısmında hafif bir fark var. İsterseniz, bunu görüntülemek için bir örnek oluşturabilirim. – Josh

Bunu daha da araştırıyorum @Smileek, güncellemeleri takip et. – Josh

editör Firefox'ta var - tıpkı görünmez hale sıfır genişliğe sahiptir. İçerdiği blogu div.text için belirlenmiş bir genişlik tanımladığınızdan beri, genişlik hesaplamasının tutarlı bir tarayıcı olduğunu garanti etmek için div.mceIframeContainer'a açık bir genişlik vermek için bu değeri kullanabilirsiniz. Bunu bir işleyicisinde yaptım, ancak sizin durumunuzda hangi yaklaşımın en iyi olacağına karar verebilirsiniz.

Genişliği açıkça belirlemek editörün görüntülenmesini sağlar, ancak Firefox'ta editörün istenenden daha yükseğe kaydırıldığı başka bir sorun ortaya çıkarır. Bu, TinyMCE'nin oluşturduğu bazı öğelere, yani bir tablo eklediği nispeten konumlandırılmış yayılmaya neden olur.

Başlangıç için bir açıklık içinde bir tablonun neden yapıştığından tam olarak emin değilim, ancak Firefox'ta gözlenen ofset, açıklığın hem nispeten hem de satır içi bir öğe olduğu gerçeğiyle ilişkiliydi. Bu sorunu gidermek için stilini uygular. Eylemdeki değişiklikleri görmek için check out this jsFiddle example.

kaynak

2012-06-15 19:48:56

Teşekkür ederim Tim !!! Sen bir hayat kurtarıcısın. – Josh

Firefox'ta bu TinyMCE editörünün konumunu nasıl düzeltebilirim?

cevap

İlgili konular