CSS Floating inline elements (960 GS)

问题:

I was just checking out 906.gs css code and noticed that they made all the floated divs inline.

http://960.gs/demo.html

Just wondering what the purpose of that is...I am always interested in learning CSS theories.

回答1:

An element with float: left is forced to have a computed display value of block.

For more information on that, see: jQuery in Chrome returns "block" instead of "inline"

The purpose of also adding display: inline is to fix an IE6 bug, the "double margin bug":

http://www.positioniseverything.net/explorer/doubled-margin.html

A coder innocently places a left float into a container box, and uses a left margin on the float to push it away from the left side of the container. Seems pretty simple, right? Well it is until it's viewed in IE6. In that browser the left float margin has mysteriously been doubled in length!

It's a free fix with no downsides (even in IE6):

That means that {display: inline;} on a float should be no different than using {display: block;} (or no display value at all), and indeed all browsers follow this specification, including IE. But, this does somehow trigger IE to stop doubling the float's margin. Thus, this fix can be applied straight, without any fussy hiding methods.

In fact, you could just apply the Inline Fix to all floats if you like, since there are no known side-effects. That way the bug can never gain traction regardless of any margins you might or might not use.