0

我一直在研究 Bootstrap 脚手架系统背后的 CSS，我想知道为什么在下面的代码中需要使用星号和不同的百分比。我相信星号是 IE hack，但为什么百分比需要不同？IE 渲染的东西是否略有不同？如果是这样，并且如果我想创建一个自己的简单脚手架，我将如何计算出带星号的宽度应该是多少（我知道如何计算出普通宽度）？

.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}
.row-fluid .span11 {
    width: 91.43646408839778%;
    *width: 91.38327259903608%;
}
.row-fluid .span10 {
    width: 82.87292817679558%;
    *width: 82.81973668743387%;
}

感谢您提供的任何帮助。:)

编辑：我现在看到 IE7 的宽度可以通过减去大约来得出。0.05319148936 从正常宽度，但为什么会这样？例如，如果我想创建一个具有更多或更少列的脚手架，那么计算会有所不同吗？

4

2 回答 2

3

IE7 在四舍五入它的子像素方面存在问题。在 webkit 或 firefox 中恰好 100% 的东西最终可能会在 IE7 中大几个像素，这些额外的几个像素的结果可能最终将列推到彼此下方。最好的解释http://ejohn.org/blog/sub-pixel-problems-in-css/

看起来好像引导程序为 IE7 中的每一列删除 0.05319148936 以处理此问题。

如果你使用 sass，你可以使用这个 mixin

@mixin x-percent-width($percentage) {
 width: $percentage;
 *width: $percentage - 0.05319148936;
}
于 2013-05-16T12:15:22.943 回答
0

这个问题很老了，但我仍然想添加一个解释。

该值源自固定为 940 像素的 bootstrap 2.0 网格宽度。舍入误差不能高于像素的一半，因此它是从 ie7 的每个宽度中减去的值。

检查代码：https ://github.com/twbs/bootstrap/blob/v2.0.4/less/mixins.less#L601

.span (@columns) {
    width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
    *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

@gridRowWidth = 940 像素

于 2014-08-12T12:45:01.847 回答