当字体大小改变时，Susy网格改变容器大小 - 如何解决这个问题？

Question

我正在使用susy网格1.0.9并注意到让我感到困惑的一些东西。

我有两个元素，“。page_1”和“.page_2”，设置相同 - 每个元素跨越10列，两侧填充。

我注意到了一个意外的行为：如果我使用$container-style: static，容器大小会根据应用于所述容器的字体大小而开始变化。

如果我将font-size更改为1em，则两个容器的大小将相同。

如果我将'$ container-style'更改为'magic'，那么两个容器的大小也相同。只有在$container-style' is set to静态。

时在元素上指定了字体大小，才会发生此行为

我做错了什么？/有解决方法吗？代码如下。

$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$container-style: static;

#section_1 {
  background-color: #963;
  border: 4px solid green;

  .pages_wrapper {
    @include container;
  }

  .page {
    border:1px solid yellow;
    @include prefix(1);
    @include span-columns(10,12);
    @include suffix(1);

    text-align: center;
    color: #fff;
  }

  .page_1 {
    font-size: 1em;
  }
  .page_2 {
    font-size: 1.25em;
  }
}

HTML：

<section id="section_1">
  <section class="pages_wrapper">
    <section class="page_1 page">
      <h1>Page 1</h1>
    </section>
    <section class="page_2 page">
      <h1>Page 2</h1>
    </section>
  </section>
</section>

显示问题的屏幕截图（最新Chrome）：

$container-style:static;，.page_2 {font-size: 1em}：  

Answer 1

.page的宽度以em计算，因为您将列/装订线宽度设置为ems（基于字体大小）。由于您为.page_2提供了比.page_1更大的字体大小，因此容器的宽度也会增加。

如果您想使用静态布局，您可以更改列/装订线设置，或设置固定的容器宽度：

$container-width: 960px;

这将在.pages_wrapper上应用固定宽度960px，.page的宽度将以百分比计算。

或者，您可以更改HTML并在使用span-column mixin的容器内的其他容器上应用font-size：

<section id="section_1">
  <section class="pages_wrapper">
    <section class="page">
      <div class="page_1">
        <h1>Page 1</h1>
      </div>
    </section>
    <section class="page">
      <div class="page_2">
        <h1>Page 2</h1>
      </div>
    </section>
  </section>
</section>