我正在尝试使用 CSS 将 TinyMCE 编辑器绝对定位在设定位置。在 Chrome 中，这工作正常。然而在 Firefox 中，编辑器消失了。我在一个复杂的应用程序中这样做，但我能够用一个非常简单的测试用例重现它:
<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 与 Firefox 进行比较，请注意 Firefox 中明显缺少编辑器的原因……是什么原因造成的，我该如何纠正？
更新: I tried making the td have relative positioning , 没有变化:
div.container div.text table tr td {
position: relative;
}
最佳答案
编辑器在 Firefox 中 - 它的宽度为零，使其不可见。由于您无论如何都为包含 block div.text 定义了一个设置宽度，因此您可以使用该值为 div.mceIframeContainer 指定一个显式宽度，以保证宽度计算将在跨浏览器中保持一致。我在 oninit 处理程序中执行此操作，但您可以决定哪种方法最适合您的情况。
显式设置宽度会使编辑器出现，但会暴露 Firefox 中的另一个问题，即编辑器移动得比预期的高。这似乎是由 TinyMCE 创建的一些元素引起的，即它插入表格的相对定位范围。
我不完全确定为什么一开始它会在跨度内放置一个表格，但在 Firefox 中观察到的偏移似乎与跨度既是相对定位又是内联元素这一事实有关。应用样式
.defaultSimpleSkin {
display:block;
}
解决了这个问题。你可以check out this jsFiddle example查看操作的变化。
关于javascript - 我怎样才能更正这个 TinyMCE 编辑器在 Firefox 中的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11052992/