Geek Answers Handbook

Fixing Subpixel Rounding Problem in CSS Fluid Mesh

I'm trying to create a fluid CSS mesh, it works in Firefox and IE8 +, but NOT in Safari / Chrome / Opera, where the problem with sub-pixel rounding becomes visible:

http://jsfiddle.net/bJKQ6/2/

.column { float: left; width: 25%; }

The main container is 100% wide, and if you resize the browser in Safari / Chrome / Opera, you will see how rounded widths are contradictory.

After extensive readings about the problem, I realized that “there is no right or wrong solution” for sub-pixel rounding, but the Firefox method seems to be the best compromise for me. (For example, if I set 4 divs with a width of 25%, I expect the covered area to be 100%.)

I would like to know if I only have a CSS-only solution, or alternatively JavaScript to solve the problem.

Thanks!

UPDATE: As of May 2014, Chrome 33 and Safari 7 seem to have chosen the “Firefox” method.

+8
javascript css rounding fluid subpixel
source share
2 answers

The Stubbornella OOCSS block diagram (links below) addresses this issue by specifying the following overrides in the last column:

 float: none; overflow: hidden; width: auto;

This allows it to occupy any width in the container.

In order to get the same behavior, a little browser is required (IE, ptzsch ...): https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https: // github.com/stubbornella/oocss/wiki/grids

+8
source share

This sucks, for this there is no good option that will span pixels up and down for each browser, but instead I usually do:

 .nested:last-child { float: right; } .nested:first-child { float: left; }

This will float the last child to the right, so px alignment is not obvious, but if it is the only element (e.g. div, width 33%), it will continue to float to the left.

0
source share

More articles:


All Articles