IOS 版本 11 及更高版本的 Ionic 1 应用中的内容重叠

Question

我有一个使用 Cordova、Ionic V1 和 AngularJS V1 构建的应用程序，在一个特定的控件中显示日期, 内容与之前的值重叠。此问题仅在 IOS 11.4.1（最新版本）中出现。在以前的版本 IOS 中，控件工作正常。

我附上了屏幕截图

在 XCode 检查后，我发现这是由 display: block 属性引起的问题。所以我尝试更改显示的值，大多数值在 IOS 中表示不受支持，而有效的是 display: -webkit-box-。但是当我添加所有内容移动到最左侧，即我在图像中突出显示的月份、日期和年份值时。

下面是代码

this.selectDate = function (date) {
        if (this.isDisabled(date)) return;
        this.selectedDate = angular.copy(date);
        this.selectedDate.setHours(0, 0, 0, 0);
        this.tempDate = angular.copy(this.selectedDate);
    };

模板代码

<div class=row>
  <div class="col datepicker-day-of-month" 
       ng-click="datepickerCtrl.changeType(\'date\')"> 
       {{datepickerCtrl.selectedDate | date: \'d\'}}
  </div>
</div>

以上代码是ionic-datepicker的一部分link.

日期内容 在 Android 上正常工作 仅在 IOS V 11.4.1 中有问题。

谢谢:)

Answer 1

我没有测试过，但我遇到过类似的问题。请尝试将 <div> 替换为 <span> 并查看是否有效：

<div class=row>
  <span class="col datepicker-day-of-month" 
       ng-click="datepickerCtrl.changeType(\'date\')"> 
       {{datepickerCtrl.selectedDate | date: \'d\'}}
  </span>
</div>

也可以使用 display: inline 而不是 display: block。

希望对您有所帮助。

Answer 2

此问题与不支持 IOS 11.4.1 的显示属性值有关。

display: block;

以上属性在最新版本IOS中无效。

所以我改变了显示的值属性

display: -webkit-inline-box !important;
text-align: -webkit-center !important;

text-align 用于将 div 个元素居中对齐。

此解决方案适用于 Android 和 IOS。

希望这对其他人有帮助。

IOS 版本 11 及更高版本的 Ionic 1 应用中的内容重叠

Content overlaps in Ionic 1 app for IOS version 11 and above

css

ios

cordova

ionic-framework

ios11