如何完美的解决时间轴开发中的"绝对定位"导致的Android兼容性问题（断线，断点问题）

这些天，正在赶一个Ionic+phoneGap+Angular1.0的项目整改，具体涉及到的一个时间轴的开发。

首先贴出UI设计图，是图中的蓝色部分的开发：

备注：由于这部分开发其实跟普通的HTML和CSS开发并无两样，所以我的标题并没有具体写Ionic，应该说这是一种开发思路，供所有开发时间轴会出现断线，断点问题的程序员们参考。

一、第一种开发布局方法：

兼容性测试：

Android的不同机型（vivo，oppo，乐视，联想等出现不同程度的断线断点，且断线方向不一）

iOS的不同机型（iPhone 5s小屏手机出现断线断点，其余iOS机型完美适配）

分五部分写。五个div。

1. 左侧的圈，上右虚折线，购买，日期，这四个为一个div。

2. 左侧深色橘色直线，次日起息，这两个是一个div。

3. 中间的圈，中间的上右虚折线，起息，日期，这四个是一个div。

4. 右侧浅色橘色直线，50天锁定期，这两个是一个div。

5. 右侧的圈，上左虚折线，继续持有或债权转让，日期，这四个是一个div。

每个div内部的元素上下居中对齐都是使用绝对定位，没有兼容性问题。而div之间的衔接上，用的是left具体px直，长度用百分比等等，就会出现兼容性问题。

二、第二种开发布局方法：

兼容性测试：Android的所有机型完美适配；iOS的所有机型完美适配。☺

布局思路：

一根浅色橘色的直线从最左到最右，90%的长度比。

    （1）一根深色橘色的直线从最左到中间，用120px。在这跟深色橘色直线上加两个左右的div，一个左圈、虚线、文字；一个右圈、虚线、文字；且圈，用3px的边框，和白色的背景即可。次日起息的文字也可以对齐。

    （2）一根透明色的直线从最左到最右，100%，一个右圈、虚线、文字。50天锁定期，使用换算66%写30天锁定期。

代码精髓如下：

HTML:

<div class="new_timeLine_box">
       <div class="new_middle_box">
             <div class="new_left_box">
                  <div class="new_left_circle">
                        <div class="new_left_buy_text">{{product.buyDate | date:'yyyy-MM-dd'}}<br/>
                          <span style="color: #999; font-size: 0.8rem;">购买</span>
                            </div>
                            <div class="new_left_top_dotted"></div>
                        </div>
                        <div class="new_right_circle">
                            <div class="new_left_buy_text">{{product.interestDate | date:'yyyy-MM-dd'}}<br/>
                                <span style="color: #999; font-size: 0.8rem;">起息</span>
                            </div>
                            <div class="new_left_top_dotted"></div>
                        </div>
                        <div class="new_left_box_bottomText">次日起息</div>
                    </div>
                    <div class="new_right_box">
                        <div class="new_right_box_circle">
                            <div class="new_right_buy_text">{{product.outLockDate | date:'yyyy-MM-dd'}}<br/>
                                <span style="color: #999; font-size: 0.8rem;">继续持有或债权转让</span>
                            </div>
                 <div class="new_right_top_dotted"></div>
                 </div>
                <div class="new_right_box_bottomText">{{product.period}}天锁定期</div>
             </div>
       </div>
</div>

CSS:

.new_middle_box{
    width:90%;
    height:4px;
    background-color:#ffba99;
    margin:0 auto;
}
.new_left_box{
    float: left;
    width: 120px;
    height: 4px;
    background-color: #fd6d28;
    position: relative;
}
.new_left_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    left:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_right_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    margin-top: -14px;
    margin-left: 3px;
    border-right: none;
    border-bottom: none;
}
.new_left_buy_text{
    width: 100px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    color: #333;
}
.new_timeLine_box{
    padding:30px 0;
}
.new_right_buy_text{
    width: 140px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    right: 0;
    text-align: right;
    color: #333;
    white-space: nowrap;
}
.new_right_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    border-left: none;
    border-bottom: none;
    position: absolute;
    top: -14px;
    right: 3px;
}
.new_right_box{
    float: right;
    width: 100%;
    height: 4px;
    background-color: transparent;
    position: relative;
    top:-4px;
}
.new_right_box_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_box_bottomText{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}
.new_right_box_bottomText{
    position: absolute;
    left: 66%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}

真的是完美哦！prefect哦！主要是思路很perfect！有没有很棒棒哦！~~~