我正处于 HTML5/CSS/JavaScript 学习曲线的中间，但碰壁了。
我的目标是创建一个表单。在执行这个看似简单的任务的过程中，我创建了一个令人困惑的怪物，它在 Firefox 和 IE 中完美显示，但在 Chrome 和 Safari 中却显得一团糟。我写了一些示例代码来说明我的问题。考虑这个三行表单，它有两个用于用户名和密码的文本字段，以及一个复选框，用于指示“Sanford and Son”中的主题是否应该在用户 session 期间播放。
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
尝试在 IE 或 Firefox 中查看它，一切看起来都很完美。现在尝试在 Chrome 或 Safari 中查看它。 “sanford”复选框出现在其标签下方。不好。复选框显然应该出现在标签的右边。更令人困惑的是，如果我用其他输入(例如文本、 radio 等)替换复选框，所有浏览器中的一切都会正确显示。这个问题似乎仅限于复选框。
我无法理解这里发生的事情。 “Sanford”标签向左浮动，因此复选框应该紧邻该标签的右侧——事实上，这正是 Firefox/IE 中发生的情况……那么为什么不在 Chrome/Safari 中呢？
如有任何帮助，我们将不胜感激。
编辑:我按要求将代码发布到 Fiddle 站点:http://jsfiddle.net/ChadDecker/FyNZw/
最佳答案
float 很棘手。如果一个元素 float ，其他元素也必须 float ，否则就会全部搞砸。所以你必须 float 每个元素并根据需要调整填充/边距。您可能还想尝试使用:
position: absolute;
并且还使用 z-index 告诉页面哪些元素在其他元素之上显示:
z-index: 0;
编辑
你在 JSFiddle 上的表单:在我看来，它的设计都是错误的。你不应该使用 form.input因为复选框字段被认为是一种输入形式，因此 <input然后它从 form.input 获取属性风格。我制作了一个简单的类来向您展示名为 box 的内容:
关于css - 不一致的 CSS 行为 : 'display' and 'float' -- need advice，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8839413/