Testing clear-fix solutions
We've come up with 5 clearing solutions to test. Below are our finds when testing on different browsers. The test has been added to /tests/manual-tests/ in https://github.com/jobara/infusion/tree/FLUID-4023.
1) fl-fix
Our current solution in FSS.
CSS
.fl-fix {overflow: auto; zoom:1;}
Browser Issues
All:
Plain Divs - Adds scrollbars when content size > container size
Mac:
FF3.6 - fine, except scrollbars
Safari 5 - fine, except scrollbars
FF4 - fine, except scrollbars
Opera - fine, except scrollbars
WinXP:
IE8 - fine, except scrollbars
FF3.6 - fine, except scrollbars
Chrome - fine, except scrollbars
IE6 - no scrollbar issue (instead the container just expands), columns: 3 flex only has 2 columns
IE7 - fine, except scrollbars
Win7:
IE9 - fine, except scrollbars
IE8 - fine, except scrollbars
FF4 - fine, except scrollbars
FF3.6 - fine, except scrollbars
2) jQuery's ui-helper-clearfix
From jQuery UI.
CSS
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
Browser Issues
All:
Mixed columns - clears div in flex column to bottom of fixed column.
Mac:
FF3.6 - fine, except clearing too far
Safari5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far
WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border
Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
3) Old Clearfix
From http://perishablepress.com/press/2009/12/06/new-clearfix-hack/.
CSS
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
Browser Issues
All:
Mixed columns - clears div in flex column to bottom of fixed column.
Mac:
FF3.6 - fine, except clearing too far
Safari 5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far
WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - doesn't work at all !!!
Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
4) New Clearfix
Also from http://perishablepress.com/press/2009/12/06/new-clearfix-hack/.
CSS
.newClearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .newClearfix { zoom: 1; } /* IE6 */
*:first-child+html .newClearfix { zoom: 1; } /* IE7 */
Browser Issues
All:
Mixed columns - clears div in flex column to bottom of fixed column.
Mac:
FF3.6 - fine, except clearing too far
Safari5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far
WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border
Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
5) display:inline-block
Seems to clear divs well.
CSS
.inline-block-clearfix { display: inline-block; }
Browser Issues
All:
List with floats - container doesn't expand to the width of the screen
Mac:
FF3.6 - fine, except width
Safari5 - fine, except width
FF4 - fine, except width
Opera - fine, except width
WinXP:
IE8 - fine, except width
FF3.6 - fine, except width
Chrome - fine, except width
IE6 - expands to width of screen, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border
Win7:
IE9 - fine, except width and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except width
FF4 - fine, except width and Plain div 100%
FF3.6 - fine, except width and Plain div 100% + padding if the window is shrunk the text can cross the border