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

Question

我有一个使用Cordova，Ionic V1和AngularJS V1构建的应用程序，并且在显示date的特定控件中，内容与先前的值重叠。 仅在IOS 11.4.1 （最新版本）中观察到此问题。 在先前版本的IOS中，控件运行正常。

我已附上屏幕截图

在检查XCode之后，我发现这是由display：block属性引起的问题。 因此，我尝试更改display的值，其中大多数值都表示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 链接的一部分 。

日期内容只能在IOS V 11.4.1中 在Android上正常运行 。

谢谢 ：）

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。

希望这对其他人有帮助。