預約頁面在紅米手機上顯示異常的問題解決總結

歡迎轉載！轉載時請註明出處：http://blog.csdn.net/nfer_zhuang/article/details/51285539

引言

預約頁面在第二步的時候，有一個彈出的時間列表的選擇界面，正常的顯示效果如下：

但是有客戶反饋，在紅米手機上無法正常顯示時間列表，效果如下：

本篇就是記錄該問題的排查和解決過程。

排查官網和本地的顯示是否一致

因爲問題是在服務器版本出現的，先檢查一下本地虛擬機上和服務器上的表現是否一致，檢查結果是一樣的，因此先排除由於網絡加載不出來的問題。

排查是數據沒有異步加載到，還是UI顯示的問題

測試方法：直接修改數據庫，讓指定日期的可預約時間段只有一個小時，在紅米上打開該日期的時間段時，title和nav button之間的間隔也很短，只有一行的距離；而其它日期，title和nav button之間的距離很長。
結果是：數據已經異步加載到微信端，是顯示的問題。

注：Mysql修改時間的年月日，時分秒不變的做法

UPDATE wp_wwf_booking set service_time = ADDTIME (date('2016-04-19') + interval 0 hour,time(service_time)) WHERE date(service_time) = '2016-04-09';

測試紅米微信和手機瀏覽器的效果差異

結果是：紅米的手機瀏覽器是可以正常顯示的，但是微信內置瀏覽器就顯示異常
另外經過測試，在小米Note以及華爲HUAWEI C8816手機的微信上也存在該問題，但是在魅族mx5上顯示正常

使用“去除無用代碼”來縮小問題

經過縮減代碼，最終確認問題是在pull-left的class上，下面就是具體分析該class和哪些class組合產生了衝突。

在整個DIV下面增加一個<div class="pull-right">的div，觀察效果

    <div class="pull-right">
      <span class="fs-15">測試測試測試測試測試測試123123</span>
    </div>

結果仍然是table無法正常顯示，那麼可以排除是由於pull-right和pull-left不配對的問題。

使用span來替換table，看只展示span的時候是否顯示正常

    <div class="pull-left">
      <span class="fs-15">測試測試測試測試測試測試123123</span>
    </div>

結果是span顯示正常，那麼問題應該就是出在table和pull-left配合的問題

將span元素添加到table元素的上面

    <div class="pull-left">
      <span class="fs-15">測試測試測試測試測試測試123123</span>
      <table class="table table-condensed">...</table>
    </div>

結果是span顯示正常，table可以顯示出來，但是效果和chrome下還是不一致

將span元素添加到table元素的下面

    <div class="pull-left">
      <table class="table table-condensed">...</table>
      <span class="fs-15">測試測試測試測試測試測試123123</span>
    </div>

結果和在上面一樣，都是span顯示正常，table可以顯示出來，但是效果和chrome下還是不一致

精簡class，找出具體的衝突關係

    <div class="pull-left">
      <table class="table table-condensed">
        <tr>
          <td><span>測試1</span></td>
          <td><input type="button" value="測試1"></td>
        </tr>
        <tr>
          <td><span>測試2</span></td>
          <td><input type="button" value="測試2"></td>
        </tr>
      </table>
    </div>

下一步就是看一下，bootstrap.min.css和calendar.css關於pull-left、table以及table-condensed這三個class是如何定義的：

/* 定義在bootstrap.min.css文件 */
.pull-left {
    float: left!important;
}

/* 定義在calendar.css文件 */
.table.table-condensed {
    table-layout: fixed;
}

/* 定義在calendar.css文件 */
.table {
    margin-top: 5px;
}

/* 定義在bootstrap.min.css文件 */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

其中margin-top: 5px;和margin-bottom: 20px;應該沒有什麼影響，可以排除。

根據業務需要，我們這裏是希望整個table的寬度是100%的，所以設置了width: 100%;和max-width: 100%;，而且將table-layout的值設置爲fixed，因爲默認的automatic是控制列寬由內容設定的。
經過上面這幾處設置，應該就滿足了我們的需求，但是爲什麼還要設置父div的float: left屬性呢？

最終發現，部分代碼是直接拷貝過來的，在寫的時候並沒有仔細分析是否需要。因此，後續在寫代碼的時候，還是要做到寫完一定要懂的原因。

問題源碼見打包文件。