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。

希望這對其他人有幫助。