jQuery FAQ recommends CSS float property unnecessarily
In the FAQ, under the heading,
Why do animations set the display style to block?, a workaround proposed is to set the element's CSS
float property [to something other than
none]. This may be bad advice, as
floated elements have side-effects that may be unwanted* and working around those side-effects can be a delicate art. There is a much better alternative, designed specifically for the task:
display: inline-block. This style is supported in all of jQuery's supported browsers, excepting the following:
- Internet Explorer (less than 8) does not support the value, but its implementation of display: inline combined with the proprietary hasLayout is the same as display: inline-block. This can be accomplished (without side-effect) with an extra CSS property/value: zoom: 1.
- Firefox (less than 3.0) does not support the value, but implements a vendor-specific value which for most use-cases is identical: -moz-inline-box.
These caveats may make for a more verbose FAQ entry, but it will probably provide better guidance toward what most developers want when they're working with inline elements.
* For instance:
- Floated block elements can disrupt layout flow, and clearing them can do the same.
- Floated block elements are not inline and may not appear at arbitrary points in an inline flow.
- Floated block elements don't respect the CSS vertical-align property.