0

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ですが、なぜそうなのですか？たとえば、列の数を増やしたり減らしたりするスキャフォールドを作成したい場合、その計算は異なりますか？

4

2 に答える 2

3

IE7には、サブピクセルの切り上げに問題があります。webkitまたはfirefoxで正確に100％であるものは、IE7では数ピクセル大きくなる可能性があります。これらの余分な数ピクセルの結果は、列を互いに押し下げる可能性があります。最高の説明http://ejohn.org/blog/sub-pixel-problems-in-css/

この問題に対処するために、ブートストラップがIE7の各列の0.05319148936を削除しているように見えます。

sassを使用する場合は、このミックスインを使用できます

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

質問はかなり古いですが、それでも説明を追加したいと思います。

この値は、940pxに固定されているブートストラップ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

于 2014-08-12T12:45:01.847 に答える