css content property forces a clear when set to “”?

Question

This is a strange CSS issue that I\'m hoping someone can shed some light on...

I\'m using Twitter Bootstrap and I\'m seeing some very odd float/clearing behaviour. I hav

Answer 1

Is this by design?

Yes.

W3 spec?

Here it is. An empty string is still considered content; if you want to completely prevent a box from being generated, you need to use content: none instead. Without modifying the Bootstrap files, you should be able to just add the following rule to your own stylesheet (overriding the content: "" declaration):

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

Note that the float is being cleared because the ::after pseudo-element is being used as a clearfix. The clear declaration is residing in a separate rule elsewhere in the Bootstrap stylesheet:

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

By adding the proper content: none declaration it will prevent the pseudo-element from being rendered at all, thereby preventing clearance.

Is this specific to only some browsers (tested in Chrome, Safari and FF on MacOS)? What is the Bootstrap team trying to accomplish with this empty string property?

Some very old versions of Chrome, Safari, Firefox and Opera don't support content: none, and instead incorrectly treat content: "" (with the empty string) as having no content. The versions that do support content: none treat both values correctly, as does IE8 and later.

I'm guessing by using the empty string, they're trying to account for these older browsers. If that's the case, it should have been overridden with content: none so newer versions will use the correct value, like this:

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

If so — and that's my best guess — then a bug report may be in order.