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

Posted 2023-02-23

【中文标题】Twitter Bootstrap 在 CSS 中使用星号宽度属性

【英文标题】：Twitter Bootstrap's use of asterisked width properties in CSS

【发布时间】：2013-02-02 07:21:05

【问题描述】：

我一直在研究 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 从正常宽度，但为什么会这样？例如，如果我想创建一个具有更多或更少列的脚手架，那么计算会不会有所不同？

【问题讨论】：

见***.com/questions/4563651/…和***.com/questions/1690642/…

非常感谢，j08691，但我非常清楚这一点，所以我对如何计算脚手架的 IE 宽度百分比更感兴趣（以及为什么它们应该不同浏览器）。

【参考方案1】：

这个问题很老了，但我还是想补充一下。

该值源自固定为 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 = 940px

【参考方案2】：

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

看起来好像为 IE7 中的每一列 bootstrap remove 0.05319148936 来处理这个问题。

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

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