फ़ायरफ़ॉक्स में इस TinyMCE संपादक की स्थिति को मैं कैसे ठीक कर सकता हूं?

मैं सीएसएस का उपयोग कर एक सेट स्थिति पर एक TinyMCE संपादक को पूरी तरह से स्थापित करने की कोशिश कर रहा हूं। क्रोम में, यह ठीक काम करता है। फ़ायरफ़ॉक्स में हालांकि, संपादक गायब हो जाता है। मैं एक जटिल आवेदन में यह कर रहा हूं, लेकिन मैं एक बहुत ही साधारण परीक्षण मामले से यह पुन: पेश करने में सक्षम था:फ़ायरफ़ॉक्स में इस TinyMCE संपादक की स्थिति को मैं कैसे ठीक कर सकता हूं?

<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। फ़ायरफ़ॉक्स से क्रोम की तुलना करें, ध्यान दें कि संपादक फ़ायरफ़ॉक्स में स्पष्ट रूप से गायब है ... इसका क्या कारण है, और मैं इसे कैसे ठीक कर सकता हूं?

अद्यतन:I tried making the td have relative positioning, कोई परिवर्तन नहीं:

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

स्रोत

2012-06-15 Josh

क्या आपको वास्तव में 'div.container div.text div.mceIframeContainer' के लिए सीएसएस की आवश्यकता है? यह इस शैली के बिना काम करता है और एक ही परिणाम दिखाता है। और यह दोनों ब्राउज़रों में काम करता है। – Smileek

@ स्मिलेक मुझे पूरी तरह से TinyMCE संपादक को पोजिशन करने की आवश्यकता है, अन्यथा ' 'के शीर्ष पर मामूली मार्जिन है जिसे मैं छुटकारा नहीं पा रहा हूं। यदि आप चाहें, तो मैं इसे प्रदर्शित करने के लिए नमूना बना सकता हूं। – Josh

मैं इस और @Smileek की जांच कर रहा हूं, अनुसरण करने के लिए अद्यतन। – Josh

संपादक फ़ायरफ़ॉक्स में है - यह सिर्फ शून्य की चौड़ाई है, यह अदृश्य बना रही है। चूंकि आप अपने युक्त ब्लॉक div.text के लिए सेट चौड़ाई को परिभाषित कर रहे हैं, फिर भी आप उस मान का उपयोग div.mceIframeContainer पर स्पष्ट चौड़ाई देने के लिए कर सकते हैं ताकि चौड़ाई गणना लगातार क्रॉस-ब्राउज़र होगी। मैंने इसे oninit हैंडलर में किया था, लेकिन आप यह तय कर सकते हैं कि आपके मामले में कौन सा दृष्टिकोण सबसे अच्छा होगा।

चौड़ाई निर्धारित करना संपादक को स्पष्ट रूप से प्रदर्शित करता है, लेकिन फ़ायरफ़ॉक्स में एक और समस्या का खुलासा करता है जहां संपादक वांछित से अधिक स्थानांतरित हो जाता है। ऐसा लगता है कि TinyMCE बनाता है, अर्थात् अपेक्षाकृत स्थानित अवधि जिसमें यह एक तालिका डालता है।

मुझे पूरी तरह से यकीन नहीं है कि यह एक अवधि के अंदर एक टेबल के अंदर क्यों चिपकता है, लेकिन फ़ायरफ़ॉक्स में देखा गया ऑफ़सेट इस तथ्य से संबंधित है कि अवधि अपेक्षाकृत स्थित है और एक इनलाइन तत्व है। शैली

.defaultSimpleSkin { 
    display:block; 
}

समस्या को हल करता है। कार्रवाई में बदलाव देखने के लिए आप check out this jsFiddle example कर सकते हैं।

स्रोत

2012-06-15 19:48:56

धन्यवाद टिम !!! आप एक lifesaver हैं। – Josh

फ़ायरफ़ॉक्स में इस TinyMCE संपादक की स्थिति को मैं कैसे ठीक कर सकता हूं?

उत्तर

संबंधित मुद्दे