0

zurbs ファンデーションを試してみると、2 つの列が実際に「階段状」に並んで配置されていることがわかりました。つまり、そのうちの 1 つは他の下に座ってしまいました。

この時点では、_foundation-global.scss と _grid.scss の 2 つの sass ファイルを使用しています。

問題はグリッドのデフォルト内にあることがわかりました。ボックスの基礎のデフォルトのパディングは、柱状のボックスの幅を拡張しました。その結果、合計幅が .row を超えて拡張されました。

これは私を混乱させます: 基礎グリッドのドキュメントには次のように書かれています:

「Foundation は box-sizing: border-box を使用しているため、境界線とパディングが列の全体の幅に影響を与えず、計算が非常に単純になります」

これとは逆に、ボックスが box-sizing: border-box に設定されていないことがわかりました。

もちろん、新しいルールを新しいスタイルシートに含めて、div、articles、sections を border-box に設定しました。

しかし、その後、この設定が Firefox では役に立たないことがわかりました。firefox はこのプロパティをサポートしていないことがわかりました。クロムはそうらしい。他のブラウザではまだテストしていません。

それで、これでどうですか？確かに財団はFirefoxをサポートする必要がありますが、何かが足りないだけです。

4

3 に答える 3

1

現時点では、Firefox にはまだプレフィックスが必要です: http://caniuse.com/#feat=css3-boxsizing

Foundation は Compass の上に構築されているため、Compass の mixin を使用するだけbox-sizingで、すべてのプレフィックスを処理できます。

@import 'compass/css3/box-sizing';

.foo {
    @include box-sizing(border-box);
}
于 2013-04-14T11:41:57.647 に答える
0

次のコードを CSS に追加すると、古いバージョンの Firefox でのボックス サイズの問題が修正されることがわかりました。

.row,
[class*="block-grid-"]
{
     -moz-box-sizing: border-box;
}

Windows 7 上の Firefox 16.0.2 でテスト済み

于 2015-07-15T09:01:39.873 に答える
0

私は先日同じ問題を抱えていました。ボックスのサイズ変更が自動的に適用されるようにするには、列をrowクラスの div 内に配置する必要があります。

しかし、最も重要なことは、これが私が見逃していたものです...数値クラスとともにクラスcolumnsを列div（EG ）に適用する必要もありますclass="large-6 columns

<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>
于 2013-04-19T05:41:00.033 に答える