CSS 行为不一致：“显示”和“浮动” -- 需要建议

发布于 2024-12-26 07:59:38 字数 1816 浏览 0 评论 0 原文

我正处于 HTML5/CSS/JavaScript 学习曲线之中，并且遇到了困难。

我的目标是创建一个表单。在执行这个看似简单的任务的过程中，我创建了一个令人困惑的怪物，它在 Firefox 和 IE 中显示完美，但在 Chrome 和 Safari 中显示为一团乱麻。我编写了一些示例代码来说明我的问题。考虑这个三行表单，其中有两个用于用户名和密码的文本字段，以及一个用于指示是否应在用户会话期间播放“Sanford and 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/< /a>

原文

I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.

My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's 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>

Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.

I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?

Any help would be greatly appreciated.

EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骄兵必败 2025-01-02 07:59:38

浮动很棘手。如果一个元素浮动，其他元素也必须浮动，否则就会全部搞砸。因此，您必须浮动每个元素，并根据需要调整填充/边距。您可能还想尝试使用：

position: absolute;

并使用 z-index 来告诉页面哪些项目要显示在其他项目之上：

z-index: 0;

编辑

您在 JSFiddle 上的表单：在我看来，这一切都设计错误。您不应该使用 form.input 因为由于复选框字段被视为输入形式，因此 然后它从 form 获取属性。输入样式。我做了一个简单的类来向您展示名为 box：

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

Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:

position: absolute;

and also using z-index which tells the page what items to display over top of the other:

z-index: 0;

EDIT

Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:

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

回复收藏 0 原文

~没有更多了~