當字體大小發生變化時，Susy網格會更改容器大小 - 如何解決此問題？

Question

我正在使用susy grids 1.0.9，並注意到讓我困惑的東西。

我有兩個元素，「.page_1」和「.page_2」，具有相同的設置 - 跨越10列，每邊填充。

我注意到一個意外的行爲：如果我使用$container-style: static，容器大小開始變化，取決於應用於所述容器的字體大小。

如果我將font-size更改爲1em，那麼兩個容器的尺寸都是相同的。

如果我將'$ container-style'更改爲'magic'，那麼這兩個容器的大小也是相同的。這種行爲只發生在$container-style' is set to static.`

這個元素上時指定的字體大小。我在做什麼錯了？/是否有解決方法？下面的代碼。

$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> 

截圖示出了問題（最新鉻）：

$container-style:static;，：

Answer 1

。第的寬度在EM計算，因爲你設置你的列/陰溝寬度爲ems（基於字體大小）。既然你給.page_2一個比.page_1更大的字體大小，容器的寬度也會增長。

如果你想使用靜態佈局你可以改變你列/排水溝設置，或者設置一個固定的容器寬度：

$container-width: 960px; 

這將適用的寬960px固定寬度上.pages_wrapper和寬度.page將以百分比計算。

或者，你可以改變你的HTML和一個額外的容器應用使用跨度列混入容器內的字體大小：

<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>