Question

这在各种浏览器中没有正确排列，但在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>

Answer 1

那是因为jsFiddle为您设置了正确的标题，尤其是没有IE文件类型的IE切换到模仿旧版本行为的模式。

尝试像这样启动HTML文件：

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

Answer 2

您的HTML中存在一些问题。

关于float概念：当你为div设置right浮点数时，你正在清除left浮点数。

此外，您应该将您希望在显示时间运行的每个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>

为什么这在jsfiddle中有效但在其他地方没有？

2 个答案: