JQuery（1.4.2）/ Firefox（3.6.3） - .before和.after不能在div上工作

我想要一个标题栏在用户点击一个框时出现。它在I.E中完美运作。 8.0但在Firefox 3.6.3中根本没有。JQuery（1.4.2）/ Firefox（3.6.3） - .before和.after不能在div上工作

HTML

<html> 
<head> 
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="sample.js"></script> 
    <style type="text/css"> 
    @import url('style.css'); 
    </style> 
</head> 
<body> 

    <div id="edit2" style="background:#dddddd;height:200px;width:200px;word-wrap:break-word"> 
    <div id="editpane"> 
    <b>blah</b> blah blah 
    </div> 
    </div> 

    <a href="#" onclick="var t = document.getElementsByTagName('html')[0].innerHTML;alert(t);"> 
save changes 
</a> 

</body> 
</html>

的Javascript

$(document).ready(function(){ 
$("#edit2").live('click',function(){ 
    if($("#menu").length == 0){ 
    $("#edit2").before('<div id="menu" style="height:10px;width:100%"><span style="width:10px;background-color:red"></span><span style="width:10px;background:blue"></span></div>'); 
    } 
    if($("#menu2").length == 0){ 
    $("#edit2").after('<div id="menu2" style="height:10px;width:100%"><span style="width:10px;background:red"></span><span style="width:10px;background:blue"></span></div>'); 
    } 
    this.contentEditable = true; 
    this.focus(); 
}); 

$("#edit2").live('blur',function(){ 
    $("#menu").remove(); 
    //$("#menu2").remove(); 
    this.contentEditable = false; 
}); 
});

任何人都可以说明为什么它不工作？我设法使用类似的代码来在两个浏览器中添加/删除新的表格行，但我不明白为什么这不起作用。

来源

2010-06-01 sickasabat

考虑什么帕特里克说一下空span标记后。我通过向span标签添加内容然后从样式标签中移除高度来解决问题。

来源

2010-06-01 20:53:06 sickasabat

仅供参考，而不是用[已解决]更改标题，并在答案中添加注释，如果有答案导致您解决问题，则应检查答案旁边的复选标记以将其指定为“已接受”。这可能对未来的读者有所帮助。 – user113716 2010-06-01 22:58:31

谢谢帕特里克。是否可以接受我自己的答案，因为这包含我为解决问题所采取的步骤？ – sickasabat 2010-06-02 16:45:01

你到底在期待什么？您正在添加2个空的<span>元素。

这段代码适用于我，当我把一些内容放在跨度中。

活生生的例子：http://jsfiddle.net/MxkJb/

来源

2010-06-01 17:48:34 user113716

谢谢你指出。我曾期待看到如我在IE 8.0中那样的实体颜色框。添加一些内容确实使框出现（包含内容），但它们与页面下方的div重叠。你知道为什么这种输出有差别吗？ – sickasabat 2010-06-01 18:33:21

也许试试display：block;在样式中？ http://jsfiddle.net/MxkJb/1/ 我会分开演示文稿和内容（没有内联样式），并使用CSS类。我保留了你的例子的代码，使它更容易。 – ozke 2010-06-01 18:33:53

@sickasabat - 输出的差异只是创建一个可以同时在符合标准的浏览器和IE上工作的网站的乐趣的一部分。您只需修改一下风格即可正常使用。我同意@ozke。尝试为您的样式使用类而不是内联。 – user113716 2010-06-01 18:50:15

JQuery（1.4.2）/ Firefox（3.6.3） - .before和.after不能在div上工作

回答

相关问题