1

这是一个奇怪的 CSS 问题，我希望有人能对此有所了解......

我正在使用 Twitter Bootstrap，我看到一些非常奇怪的浮动/清除行为。我在主要内容中有一个右浮动 div 和一个横向表单。第二个表单字段似乎无缘无故地在浮动 div 下方清除。遍历所有 HTML 元素和 CSS 声明，这是导致这种情况发生的一个奇怪属性。我已将其简化为一个 CSS 声明：

 .control-group::before, .form-horizontal .control-group::after {
   display: table;
   content: "";
   line-height: 0;
 }

具体来说，内容：“”；如果你禁用这个声明，它会随着第一个字段浮动，一切都很好。

我创建了一个 JS 小提琴来演示：http: //jsfiddle.net/whiteatom/UJ89p/1/embedded/result/

附源代码：http: //jsfiddle.net/whiteatom/UJ89p/1/

这是设计使然吗？W3规格？这是否仅针对某些浏览器（在 MacOS 上的 Chrome、Safari 和 FF 中测试）？Bootstrap 团队试图用这个空字符串属性来完成什么？我可以在不编辑引导 CSS 文件的情况下覆盖它吗？

干杯，

4

1 回答 1

3

这是设计使然吗？

是的。

W3规格？

这里是。空字符串仍被视为内容；如果要完全阻止生成框，则需要content: none改用。在不修改 Bootstrap 文件的情况下，您应该能够将以下规则添加到您自己的样式表中（覆盖content: ""声明）：

/* Single-colon pseudo-elements for consistency with Bootstrap's IE8 compat */
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    content: none;
}

请注意，浮动正在被清除，因为::after伪元素被用作清除修复。该clear声明位于 Bootstrap 样式表中其他地方的单独规则中：

.form-horizontal .control-group:after {
    clear: both;
}

通过添加正确的content: none声明，它将完全防止伪元素被渲染，从而防止清除。

这是否仅针对某些浏览器（在 MacOS 上的 Chrome、Safari 和 FF 中测试）？Bootstrap 团队试图用这个空字符串属性来完成什么？

一些非常旧的 Chrome、Safari、Firefox 和 Opera 版本不支持content: none，而是错误地将content: ""（使用空字符串）视为没有内容。支持的版本content: none正确处理这两个值，IE8 及更高版本也是如此。

我猜测使用空字符串，他们试图解释这些旧浏览器。如果是这种情况，它应该被覆盖，content: none因此较新的版本将使用正确的值，如下所示：

.form-horizontal .control-group:before, .form-horizontal .control-group:after {
    display: table;
    content: "";
    content: none;
    line-height: 0;
}

如果是这样——这是我最好的猜测——那么可能需要一份错误报告。

于 2012-12-01T03:43:03.953 回答