莫名其妙的 HTML/CSS 行为答案

【问题标题】：Inexplicable HTML/CSS behaviour莫名其妙的 HTML/CSS 行为
【发布时间】：2012-11-14 00:41:36
【问题描述】：

我有一个 简单的 html 页面和一个相当 简单的 css，它让我发疯 - 我确实 完全不明白这里发生了什么 em>（最初的任务是创建一个简单的联系表格，使用modernizr，但我已经剥离了所有内容）：

<html>
<head>
    <style>
        body {
            font-size: 16px;
            line-height: 26px;
        }

        label {
            float: left;
            margin-top: 4px;
        }

        input {
            border: 1px solid #ccc;
            margin: 4px;
        }

        input:focus {
            border: 2px solid #900;
        }
    </style>

</head>
<body>
    <label>1:</label><input id="1" /><br />
    <label>2:</label><input id="2" /><br />
    <label>3:</label><input id="3" /><br />

</body>
</html>

带有标签的三行和输入框的左边距增加，如果我将焦点设置到任何输入，下面的会跳回（至少在 Chrome 和 FF 中）。 为什么？

现在，如果我删除几乎任何 css 属性，事情就会变得陌生：

上面的原文可以在here找到。
如果我删除 body 行 （甚至只删除 line-height: 26px; 部分！！），左边距消失（为什么？），检查here。
如果我删除 input:focus 行，跳转不再发生（为什么？），请检查 here。
如果我从 input 中删除 border: 1px solid #ccc;，边距消失（为什么？？？），请检查 here。

还有其他的相互依赖关系。这在 jsfiddle 和其他在线工具中不会发生，但可以在本地轻松复制。

底线：整个行为对我来说似乎完全陌生，我希望 CSS Sherlock Holmes 可以阐明这里发生的事情。

【问题讨论】：

我建议使用<ul> 和<li> 作为联系表单，而不是大量的<br />，这样既可以解决问题，又可以使您的页面更具语义
@Andy，谢谢，没错，但我仍然想了解我的 html/css 的奇怪行为。
你想用font: 16px/26px Arial;做什么？我不明白 16px/26px 部分。
@Magus size-in-css-with-slash
移除焦点上的 2px 而不是 1px。它解决了你的问题，它与项目之间的间距有关。

标签： html css

【解决方案1】：

问题在于编号列表。

您正在设置一个边距顶部，并使行高大于文本本身。这通常很好，但这会使数字大于输入框。

您正在用<br /> 强制换行，它们不能自然地浮动到它们应该在的位置，因为之前的数字对于它的“行”来说“太大”。

我很难解释它，但要修复它，您可以将line-height: 2; 添加到输入框，或您提到的任何修复，或者最好将其全部替换为有序列表。

如果你还是不明白，试着在标签上设置border: 1px solid #000;，你就会明白我的意思了。

【讨论】：

你是对的！我得到了它。我肯定会使用一个列表，但我感到如释重负，因为它现在很有意义。

【解决方案2】：

意外的行为是因为labels 在相同的float 上下文中运行，没有clear 破坏它。因此，当您将第二个 label 告诉左侧的 float 时，它会找到前一个标签，因此会“堆叠”到右侧。

将以下内容添加到您的 CSS（如果您坚持使用 br 标签）：

br {
    clear: both;
}

【讨论】：

它堆叠在input/br 的下方，而不是它的右侧，因为input/br 是内联的。
这行得通并且有意义。但我仍然想知道为什么删除 line-height: 26px; 可以解决这个问题。可能是间距和浮动问题的组合？