css 优惠券兼容ie8版本

时间:2019-01-18
本文章向大家介绍css 优惠券兼容ie8版本,主要包括css 优惠券兼容ie8版本使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<style type="text/css" >
    .couponMain{width: 1670px;height: 2000px;background: #FE4227;}
    .couponContent{width: 700px; margin:0 auto;height:auto;}
    .lottery{width: 100%;min-height: 170px;background: #D93821;border-radius: 10px;color: #555; padding: 20px 0;}
    .lottery_num{width: 85%;margin:5px auto;height: 130px;background: #FFF;border-radius: 4px;}
    .lottery_structure{position: relative;}
    .lottery_structure::after{display: block;content:'';clear:both;}
    .lottery_structure_price{font-size: 14px;border-right: 2px #888 dashed;}
    .lottery_structure_price,.lottery_structure_info{text-align: center;width: 30%;float: left;height: 130px;display:table;}
    .lottery_structure_info{width: 67.5%;text-align:left; }

    .lottery_structure_info ul {font-size:14px;}
    .lottery_structure_info ul li{font-size:14px;}
    .lottery_structure_info ul li span{font-size:25px;height: 18px;display: inline-block;overflow: hidden;padding-right: 8px; }
    .lottery_structure_info  p strong{font-size:17px;}
    .price_em{color: #FF2002;}
    .price_em_yenIcon{font-size: 25px;}
    .price_em_price{font-size: 40px;color:;}
    .lottery_structure_cell{padding: 10px 0}
    .lottery_structure_price_middle{display:table-cell; vertical-align:middle;}
    .lottery_structure_info .lottery_structure_price_middle{line-height: 25px;padding-left:7%}
    .radius_top{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
    .radius_top:before, .radius_top:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
    .radius_top:after {border-right: 20px dotted #D93821; right: 1px;}
    .radius_bottom{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
    .radius_bottom:before, .radius_bottom:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
    .radius_bottom:after {border-right: 20px dotted #D93821; right: 1px;}

    .radius_top1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
    .radius_top1:before, .radius_top1:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
    .radius_top1:after {border: 21px dotted #D93821; right: 1px;}
    .radius_bottom1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
    .radius_bottom1:before, .radius_bottom1:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
    .radius_bottom1:after {border: 21px dotted #D93821; right: 1px;}
    .sawtooth {
    /* 相对定位,方便让before和after伪元素绝对定位偏移 */
    position: relative;
    /* 把超出div的部分隐藏起来 */
    overflow: hidden;
    height: 130px;
    width: 1.3%;
    float: left;
    background: #FCBF00;
    border-radius: 4px 0px 0 4px;
}

.sawtooth:before, .sawtooth:after {
    content: ' ';
    width: 0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 5px;
}

/*.sawtooth:before {
    border-right: 10px dotted white;
    left: -5px;
}*/
.sawtooth:after {
    /* 圆点型的border */
    border-left: 5px dotted white;
    /* 偏移一个半径,让圆点的一半覆盖div */
    right: -2px;
}
.couponContent .overflow {
    width: 322px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}
.radius_border{width: 22px;}
  </style>

  
<div class="couponMain">
   <img src="<?php echo SHOP_TEMPLATES_URL;?>/images/coupon/PC/huodong.png" alt="" >
   <div class="couponContent">
     <div class="lottery">
      <div class="lottery_structure_cell">
        <div class="lottery_num">
            <div class="lottery_structure">
                <div class="sawtooth"></div>
                <div class="lottery_structure_price">
                  <div class="lottery_structure_price_middle">
                            
                    <p class="price_em"><span class="price_em_yenIcon">&yen;</span><span class="price_em_price">50</span></p>
                    <p>满100可用</p>
                  </div>
                </div>
                <div class="lottery_structure_info">
                  <div class="lottery_structure_price_middle">
                    <p><strong>通用优惠券</strong></p>
                    <ul>
                      <li><font class="overflow" ><span>·</span>满100可用</font></li>
                      <li><span>·</span>优惠券数量:100张</li>
                      <li><span>·</span>2018-11-11至2018-11-12</li>
                    </ul>
                  </div>
                  <div class="radius_border">
                    <span class="radius_top"></span>
                    <span class="radius_bottom"></span>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <div class="lottery_structure_cell">
        <div class="lottery_num">
            <div class="lottery_structure">
                <div class="sawtooth"></div>
                <div class="lottery_structure_price">
                  <div class="lottery_structure_price_middle">
                            
                    <p class="price_em"><span class="price_em_yenIcon">&yen;</span><span class="price_em_price">50</span></p>
                    <p>满100可用</p>
                  </div>
                </div>
                <div class="lottery_structure_info">
                  <div class="lottery_structure_price_middle">
                    <p><strong>通用优惠券</strong></p>
                    <ul>
                      <li><font ><span>·</span>满100可用</font></li>
                      <li><span>·</span>优惠券数量:100张</li>
                      <li><span>·</span>2018-11-11至2018-11-12</li>
                    </ul>
                  </div>
                  <div class="radius_border">
                    <span class="radius_top"></span>
                    <span class="radius_bottom"></span>
                  </div>
                </div>
            </div>
        </div>
      </div>  
     </div>


   </div>
</div>
<script  type="text/javascript" >
  
  $(function(){
    var browser=navigator.appName 
    var b_version=navigator.appVersion 
    var version=b_version.split(";"); 
    var trim_Version=version[1].replace(/[ ]/g,""); 
    if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0") 
    { 

    $(".radius_top").addClass("radius_top1").removeClass('radius_top');
    $(".radius_bottom").addClass("radius_bottom1").removeClass('radius_bottom');
    } 
  })
</script>
<script type="text/javascript"> 


</script>