离子含量中的DOM元素方向错误

Question

我已经在Ionic网站（PWA）中建立了一个普通的静态页面，但是在Firefox上出现了意外行为： 我所有离子含量的子元素都以错误的方向绘制。

在Chrome或Safari上，一切似乎都很好...

我试图找到一个可应用flex-direction : column或flex-direction : column-reverse的伸缩容器，但这没用。

模板和样式：

#page-title {
    text-align: center;
    color: var(--ion-color-primary);
    font-size: 3rem;
    font-weight: 200;
    text-shadow: 0 0 1px var(--ion-color-tertiary);
}

#description {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;

    ion-item, ion-item ion-label {
        font-size: 1.2rem;
    }
    ion-item ion-note {
        font-size: 0.9rem;
        position: relative;
        left: 60px;
        bottom: 10px;
    }
}

<ion-content padding>

  <ion-text>
    <h1 id="page-title">TARIFS</h1>
  </ion-text>

  <div id="description">
    <ion-text>
      <h2>Abonnements mensuels</h2>
    </ion-text>
    <ion-list no-lines id="subscriptions">
      <ion-item text-wrap>
        <ion-icon name="arrow-dropright" color="primary"></ion-icon><ion-label>&nbsp;&nbsp;&nbsp; Offre individuelle <strong>pro</strong> (18€ HT / mois)</ion-label>
      </ion-item>
      <ion-item text-wrap>
        <ion-icon name="arrow-dropright" color="primary"></ion-icon><ion-label>&nbsp;&nbsp;&nbsp; Offre individuelle <strong>perso</strong> (19€ TTC / mois)</ion-label>
      </ion-item>
    </ion-list>

    <ion-text>
      <h2>Montant des courses</h2>
    </ion-text>
    <ion-list no-lines id="runs">
      <ion-item text-wrap>
        <ion-icon name="arrow-dropright" color="primary"></ion-icon><ion-label>&nbsp;&nbsp;&nbsp; <strong>Course 20</strong> (50€)</ion-label>
      </ion-item>
      <ion-item text-wrap>
        <ion-note>Pour un trajet de 20km maximum</ion-note>
      </ion-item>
      <ion-item text-wrap>
        <ion-icon name="arrow-dropright" color="primary"></ion-icon><ion-label>&nbsp;&nbsp;&nbsp; <strong>Course 40</strong> (80€)</ion-label>
      </ion-item>
      <ion-item text-wrap>
        <ion-note>Pour un trajet entre 20km et 40km</ion-note>
      </ion-item>
      <ion-item text-wrap>
        <ion-icon name="arrow-dropright" color="primary"></ion-icon><ion-label>&nbsp;&nbsp;&nbsp; <strong>Course 100</strong> (150€)</ion-label>
      </ion-item>
      <ion-item text-wrap>
        <ion-note>Pour un trajet entre 40km et 100km</ion-note>
      </ion-item>
    </ion-list>
  </div>

</ion-content>

在上面的屏幕截图中，您可以在Firefox检查器中看到DOM元素的呈现方式如下：

<div id="description">...</div>
<ion-text>...</ion-text>

尽管在我的HTML文件中，

<ion-text>...</ion-text>
<div id="description">...</div>

所以我不确定这仅是由于CSS。...

有人有类似行为吗？我会很感激您能给我的各种帮助：）

编辑： 目前，我正在使用Ionic CLI 4.0.3，并且该项目使用Ionic Framework 4.0.0.beta.2。

这是我的离子信息命令结果：

Ionic:
   ionic (Ionic CLI)          : 4.0.3 (/Users/gilhardl/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.0-rc.2
   @angular-devkit/schematics : 0.7.0-rc.2
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

System:
   NodeJS : v9.11.1 (/usr/local/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra

这是我的package.json：

{
  "name": "sambernard-site",
  "version": "0.0.1",
  "author": "CYBERG",
  "homepage": "https://sam-bernard.fr/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.9",
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "6.0.9",
    "@angular/service-worker": "6.0.9",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.2",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "angular5-recaptcha": "0.0.2",
    "core-js": "^2.5.3",
    "jquery": "^3.3.1",
    "ngx-owl-carousel": "^2.0.7",
    "owl.carousel": "^2.3.4",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler": "6.0.9",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angular-devkit/architect": "0.7.0-rc.2",
    "@angular-devkit/build-angular": "0.7.0-rc.2",
    "@angular-devkit/core": "0.7.0-rc.2",
    "@angular-devkit/schematics": "0.7.0-rc.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.7.2"
  },
  "description": "Site web SAMBERNARD",
  "browser": {
    "path": false,
    "fs": false,
    "crypto": false,
    "http": false,
    "https": false
  }
}