爲什麼這個工作在jsfiddle而沒有其他地方？

http://jsfiddle.net/Jg3FP/1/爲什麼這個工作在jsfiddle而沒有其他地方？

這不排隊在各種瀏覽器正常，但在js小提琴工作正常，我沒有做任何異國情調。它爲什麼表現如此，我該如何解決它？

enter image description here

<div id="diceDiv"> 
    <div id="dice1Div">#</div> 
    <input type="checkbox"/> 
    <div id="dice2Div">#</div> 
    <input type="checkbox"/> 
    <div id="dice3Div">#</div> 
    <input type="checkbox" /> 
    <div id="dice4Div">#</div> 
    <input type="checkbox"/> 
    <div id="dice5Div">#</div> 
    <input type="checkbox"/> 
    <div id="dice6Div">#</div> 
    <input type="checkbox"/> 
    <br/> 
    <input type="button" value="Roll" /> 
</div> 
<div id="log"></div> 
<div id="score"></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("div div").css("float", "left"); 
    $("div input").css("clear", "right"); 
</script>

來源

2013-04-02 Preston

哪些瀏覽器並不在它的工作？此外，您的示例代碼使用jQuery 1.9.1，但您鏈接到的小提琴使用2.x邊緣版本。 – j08691

此外 - 請 - http://doc.jsfiddle.net/faq.html#code-is-working-on-jsfiddle-not-on-site-local-machine – zalun

這是因爲的jsfiddle將爲您設置正確的頭，特別是沒有哪個IE切換到模擬模式，舊版本的行爲的doctype。

嘗試啓動HTML文件是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

來源

2013-04-02 16:53:47

太棒了，謝謝。你能否解釋元標記在這裏做了什麼？ – Preston

元標記告訴IE使用其引擎的最新版本，它通常是距離w3.org規範最近的一個。這解決了浮動元素，svg，畫布等的許多問題。 –

您可以從這裏獲得更多官方信息[在MSDN上]（http://msdn.microsoft.com/zh-cn/library/jj676915（v = vs.85）.aspx） –

有你的HTML的一些問題。

關於float概念：您正在清除right浮動，而不是您設置left浮動爲divs。

此外，您應該將您希望在顯示時間運行的每個jQuery調用移動到$(document).ready()。

DIV通常是一個塊元素，我冒昧地修改您的HTML，以便每個選項都有一個div。通過這種方式，您可以讓塊格式爲您執行「清除」。

此外，我將零填充和邊距應用於複選框。如果需要，你可以改變它。

查看HTML（你可以保存並在本地運行）：

<!DOCTYPE html> 
<html> 
<head> 
<title>Sample</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
    $('#diceDiv INPUT').css({padding: '0px', margin: '0px'}) 
    }); 
</script> 
</head> 
<body> 
<div id="diceDiv"> 
    <div> 
    <span id="dice1Div">#</span><input type="checkbox"/> 
    </div> 
    <div> 
    <span id="dice2Div">#</span><input type="checkbox"/> 
    </div> 
    <div> 
    <span id="dice3Div">#</span><input type="checkbox" /> 
    </div> 
    <div> 
    <span id="dice4Div">#</span><input type="checkbox"/> 
    </div> 
    <div> 
    <span id="dice5Div">#</span><input type="checkbox"/> 
    </div> 
    <div> 
    <span id="dice6Div">#</span><input type="checkbox"/> 
    </div> 
    <br/> 
    <input type="button" value="Roll" /> 
</div> 
<div id="log"></div> 
<div id="score"></div> 
</body> 
</html>

來源

2013-04-02 18:10:43 Niloct

真棒謝謝你，我沒有做過很多HTML和JS/jQuery，所以這對我來說是新的，謝謝你的提示。 – Preston

不客氣。如果有一件事你應該記得，是https://developer.mozilla.org/en-US/是一個很好的學習場所。 – Niloct

爲什麼這個工作在jsfiddle而沒有其他地方？

回答

相關問題