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上工作

回答

相關問題