★ ★ ★ ★ ★ ★ ★ ★ ★ ★pc端問題及解決方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

一、pc.彈窗，背景兼容ie8的寫法

.Dialogbg-quan{  background-color: #000;  
height: 100%;  left: 0;  opacity: 0.7;  position: fixed;  
top: 0;  width: 100%; z-index: 200; -moz-opacity:.7;filter:alpha(opacity=70);  /*半透明兼容ie8*/
display: none;}

.Dialog-quan{position: fixed;top: 50%; left: 50%;  box-shadow: 0 0 0 #999; font-size: 14px;  
   width:560px; height: 351px; background: url("../images/jp-bg.png"); margin: -175px  auto 0 -280px; padding: 0; z-index: 99999; display: none;
  .closes{ width: 30px; height: 30px; position: absolute; top:-45px; right:-45px; cursor: pointer; z-index: 8; background: url("../images/close.png") no-repeat;}
  .quan{position: relative; display: none; margin-top: 40px;
    .go-use {display: block; position: absolute; bottom: 207px; left: 50%; margin-left: -120px; width: 240px; height: 50px; cursor: pointer}
  }
}
 

<div class="Dialogbg-quan"></div>
<div class="Dialog-quan">
    <div class="closes"></div>
    <div class="quan quan-1"><a class="go-use" href="#cake"></a><img src="images/jp-1.png" alt=""></div>
    <div class="quan quan-2"><a class
 
="go-use" href="#cake"></a><img src="images/jp-2.png" alt=""></div>
</div>

=====================================================================

二、pc兼容小屏處理方案

方案1、通過css3樣式進行控制，但是不支持ie8

@media screen and (max-width:1700px) {
   .dis-1{left: -100px !important;}
   .dis-2{right: -180px !important
 
;}
}

方案2、通過js判斷是否超過1700px

 var maxWidth = $(window).width();
  if(maxWidth < 1700){
       。。。
  }else{
       。。。
 }
 $(window).resize(function() {
    maxWidth = $(window).width();
    if(maxWidth < 1700){
         。。。
   }else{
         。。。
   }
});

================================================================

三、引入公共文件、public-shimily.js

四、判斷ie瀏覽器的版本

  /*
 *判斷ie瀏覽器版本
 * */
  function IEVersion() {
    var userAgent = navigator.userAgent; /*取得瀏覽器的userAgent字符串*/
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; /*判斷是否IE<11瀏覽器*/
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; /*判斷是否IE的Edge瀏覽器*/
    var isIE11 = userAgent.indexOf(‘Trident‘) > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      var fIEVersion = parseFloat(RegExp["$1"]);
      if(fIEVersion == 7) {
        return 7;
      } else if(fIEVersion == 8) {
        return 8;
      } else if(fIEVersion == 9) {
        return 9;
      } else if(fIEVersion == 10) {
        return 10;
      } else {
        return 6;//IE版本<=7
      }
    } else if(isEdge) {
      return ‘edge‘;//edge
    } else if(isIE11) {
      return 11; //IE11
    }else{
      return -1;//不是ie瀏覽器
    }
  }
  //console.log(IEVersion());
  window.IEVersion = IEVersion;
  /*瀏覽器判斷*/
  /*if(IEVersion() > 0 && IEVersion() < 11){
    alert("您的瀏覽器版本過低，\n因此無法上傳照片參與抽獎活動，\n請及時更換最新的瀏覽器！");
  }*/

五、清除浮動

1.通過overflow: hidden;清除浮動

.box{overflow: hidden;}

2.通過css3偽類

.clearfix:after {clear: both; content: ".";display: block; height: 0;visibility: hidden;}

3.

.cleaBoth { clear: both; font-size: 0;height: 0;}

<div class="cleaBoth"></div>

六、數量加減時，禁止雙擊會自動選中

/*數量加減時，禁止雙擊選中*/
span.num{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}

mcake活動維護常見問題記錄