html - 为什么当我弯曲父容器时 Chrome 会挤压我的文本？

问题描述

Stackblitz：https ://stackblitz.com/edit/angular-flex-chrome-squishing-text

<mat-accordion [multi]="false">
    <mat-expansion-panel>
        <mat-expansion-panel-header expandedHeight="116px" collapsedHeight="116px">
            <div fxLayout="column" fxFlex="100%">
              <div fxLayout="row" fxLayoutAlign="start center">
                  <span fxFlex="50%">header 1</span>
              </div>
              <div fxLayout="row" fxLayoutAlign="start center">
                  <span fxFlex="50%" >header 2</span>
                  <span fxFlex="50%">text 2</span>
              </div>
              <div fxLayout="row" fxLayoutAlign="start center">
                  <span fxFlex="50%" >header 3</span>
                  <span fxFlex="50%">text 3</span>
              </div>
              <div fxLayout="row" fxLayoutAlign="start center">
                  <span fxFlex="50%" >header 4</span>
                  <span fxFlex="50%">text 4</span>
              </div>
          </div>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
            <div fxLayout="row" fxLayoutAlign="none stretch">
                <div fxFlex="1 1 auto" fxLayout="column">
                    <div fxLayout="column" fxFlex="100%">
                        <div fxLayout="row">
                            <span fxFlex="50%">header 5</span>
                            <span fxFlex="50%">text 5</span>
                        </div>
                        <div fxLayout="column">
                            <div fxLayout="row">
                                <span fxFlex="50%">header 6</span>
                                <span fxFlex="50%">text 6</span>
                            </div>
                        </div>
                        <div fxLayout="column">
                            <div fxLayout="row">
                                <span fxFlex="50%">header 7</span>
                                <span fxFlex="50%">text 7</span>
                            </div>
                        </div>
                        <div fxLayout="column">
                            <div fxLayout="row">
                                <span fxFlex="50%">header 8</span>
                                <span fxFlex="50%">text 8</span>
                            </div>
                        </div>
                    </div>
                    <div fxFlex="100%">
                        content goes here
                    </div>
                </div>
                <div class="space-taker"></div>
            </div>
        </ng-template>
    </mat-expansion-panel>
</mat-accordion>

请注意，这<div class="space-taker"></div>纯粹是为了说明标题中扩展面板切换占用的空间，如果将其删除，则标题中的文本和内容不会对齐。

那个 div 就是我尝试使用 flex 来排列内容的原因。

Chrome 似乎错误地计算了扩展面板内容中文本的高度。Firefox 不显示此行为。

铬 72.0.3626.121：

火狐 65.0.2：

请注意，跨度的高度在 Chrome 中计算为 11.25px，而在 Firefox 中正确计算为 18px。

容器中有更多物品会加剧该问题。

更新：看起来这是 Chrome 72 中的一个错误。今天早上我更新到 Chrome 73.0.3683.86，Chrome 现在具有预期的行为。但是，接受的答案确实在 Chrome 72 中修复了它。这是 bugtracker ： https ://bugs.chromium.org/p/chromium/issues/detail?id=596743和 chrome 功能页面：https://www.chromestatus .com/feature/6736527476391936

标签： htmlcssangularflexboxangular-material

html - 为什么当我弯曲父容器时 Chrome 会挤压我的文本？

问题描述

解决方案

推荐阅读