Question

我一直在看Bootstrap脚手架系统背后的CSS，我想知道为什么星号和不同的百分比在下面的代码中是必要的。我相信星号是一个IE黑客，但为什么百分比需要不同？ 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，但为什么会这样呢？例如，如果我想创建一个包含更多或更少列的支架，那么计算会不同吗？

Answer 1

IE7在对其子像素进行舍入时存在问题。在webkit或firefox中完全100％的东西最终可能会在IE7中变大几个像素，这些额外几个像素的结果最终可能会将列推到彼此之下。最好的解释http://ejohn.org/blog/sub-pixel-problems-in-css/

看起来bootstrap为IE7中的每一列删除了0.05319148936来处理这个问题。

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

@mixin x-percent-width($percentage) {
 width: $percentage;
 *width: $percentage - 0.05319148936;
}

Answer 2

这个问题已经很久了，但我还是想补充说明。

此值源自bootstrap 2.0网格宽度，固定为940px。舍入误差不能高于像素的一半，因此它是从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 = 940px

Twitter Bootstrap在CSS中使用带星号的宽度属性

2 个答案: