Я создал общую статическую страницу на своем Ionic-сайте (PWA), но у меня неожиданное поведение в Firefox:
Все дочерние элементы моего ion-content отображаются в неправильном направлении.
В 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> 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:
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
}
}