我在 Ionic 网站 (PWA) 中构建了一个通用静态页面，但在 Firefox 上出现了意外行为：我所有 ion-content 的子元素都以错误的方向呈现。
在 Chrome 或 Safari 上，一切似乎都很好......
我试图找到一个 flex 容器来应用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> 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> 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> <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> <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> <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 info 命令结果：
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
}
}