Question

这是一个奇怪的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团队试图用这个空字符串属性完成什么？我可以在不编辑bootstrap CSS文件的情况下覆盖它吗？

干杯，

Answer 1

这是设计吗？

是

W3规格？

Here it is.空字符串仍被视为内容;如果您想完全阻止生成框，则需要使用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;
}

请注意，正在清除float，因为::after伪元素被用作clearfix。 clear声明驻留在Bootstrap样式表中其他位置的单独规则中：

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

通过添加适当的content: none声明，它将阻止伪元素被渲染，从而防止清除。

这仅针对某些浏览器（在MacOS上的Chrome，Safari和FF中测试过）吗？ Bootstrap团队尝试使用这个空字符串属性完成什么？

Some very old versions of Chrome, Safari, Firefox and Opera don't support 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;
}

如果是这样 - 那是我最好的猜测 - 那么错误报告可能是有序的。

当设置为“”时，css内容属性强制清除？

1 个答案: