Question

我正处于HTML5 / CSS / JavaScript学习曲线的中间并且已经碰壁了。

我的目标是创建一个表单。在执行这个看似简单的任务的过程中，我创造了一个令人困惑的怪物，在Firefox和IE中完美显示，但在Chrome和Safari中显得混乱不堪。我写了一些示例代码来说明我的问题。考虑这三行形式，其中包含两个用于用户名和密码的文本字段，以及一个复选框，用于指示“Sanford和Son”中的主题是否应在用户会话期间播放。

<!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'复选框在下面的标签处显示。不好。该复选框显然应该出现在标签的右侧中。更令人困惑的是，如果我用其他输入（例如文本，广播等）替换复选框，则所有浏览器中的所有内容都会正确显示。此问题似乎仅限于复选框。

我无法理解这里发生的事情。 “Sanford”标签浮动到左侧，所以大概应该将复选框流到该标签的右边 - 实际上这正是Firefox / IE中发生的事情......那么为什么不在Chrome / Safari中呢？

非常感谢任何帮助。

编辑：我已根据要求将代码发布到Fiddle网站：http://jsfiddle.net/ChadDecker/FyNZw/

Answer 1

Float很棘手。如果一个元件浮动，其他元件必须浮动或者全部拧紧。所以你必须浮动每个元素并根据需要调整填充/边距。您可能还想尝试使用：

position: absolute;

并且还使用z-index告诉页面在另一个上面显示哪些项目：

z-index: 0;

修改

你在JSFiddle上的表格：在我看来，这一切都是错误的。您不应该使用form.input，因为复选框字段被视为输入形式，因此<input然后它从form.input样式获取属性。我做了一个简单的课程，向你展示了一个叫做方框：

http://jsfiddle.net/FyNZw/2/

不一致的CSS行为：'display'和'float' - 需要建议

1 个答案: