修复CSS流体网格中的子像素舍入问题 [英] Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

问题描述

我想创建一个流动的CSS网格，它可以在Firefox和IE8 +，但不能在Safari / Chrome / Opera中，子像素舍入问题变得可见：

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

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

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

主容器的宽度为100％，如果更改浏览器Safari / Chrome / Opera中的大小可以看到圆角宽度是如何不一致的。

The main container has a width of 100%, and if you change the browser size in Safari/Chrome/Opera you can see how the rounded widths are inconsistent.

在大量阅读这个问题后，我理解没有正确或错误的解决方案对于子像素舍入，但是Firefox的方式似乎是对我最好的折衷。
（例如，如果我以25％的宽度设置4个div，我预计覆盖面积为100％。）

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

我想知道如果有一个CSS的解决方案，我错过了，或者一些JavaScript解决问题。

I would like to know if there is a CSS only solution that I missed, or alternatively some JavaScript to solve the problem.

谢谢！

更新：截至2014年5月，Chrome 33和Safari 7似乎已选择了Firefox方式。

推荐答案

Stubbornella的OOCSS框架（下面的链接）网格模块通过给最后一列提供以下覆盖来处理：

Stubbornella's OOCSS framework (links below) grids module deals with this by giving the last column the following overrides:

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

这允许它占据容器内剩余的任何宽度。

This allows it to occupy whatever width remains within the container.

需要一点浏览器分叉（IE，ptzsch ...）来获得相同的行为：
https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
https://github.com/stubbornella / oocss / wiki / grids

A bit of browser-forking (IE, ptzsch…) is necessary to get the same behaviour: https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids

这篇关于修复CSS流体网格中的子像素舍入问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！