1

http://jsfiddle.net/Jg3FP/1/

这在各种浏览器中没有正确排列，但在 js fiddle 中工作正常，我没有做任何异国情调的事情。为什么它会这样，我该如何解决？

在此处输入图像描述

在此处输入图像描述

<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>
4

2 回答 2

2

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

尝试像这样启动您的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
于 2013-04-02T16:53:47.537 回答
1

您的 HTML 中存在一些问题。

关于浮动概念：当您为 divright设置浮动时，您正在清除浮动。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>
于 2013-04-02T18:10:43.480 回答