Search

3/06/2008

Float-less CSS layout

Float-less CSS layout - 用 display:table, display:table-row, display:table-cell 弄出來的。

No div, no float, no clear, no hack*, no joke! A CSS layout that does not use DIV, FLOAT, CLEAR nor structural HACK!
No FLOAT means fewer IE bugs:

* Doubled Float-Margin bug,
* Three Pixel Text-Jog bug,
* Etc.

and here's the comment from Chris Coyier
For another thing, I don’t see what’s so wrong with floats. I know about the IE double margin thing. Big deal. Clearing floats can be a little unsemantic but it works and it’s valid and it’s nothing to re-create your entire layout over. For another thing, it says it’s hack free but clearly uses a hack right in it’s own header. You might argue that conditional comments aren’t hacks but I feel they are at least in the same genre. Still, despite all these things, I gotta admit it does a damn good job of what it says it does. The layouts are very solid.

沒有留言: