mcake活动维护常见问题记录

Posted 2020-11-08 shimily

  ★ ★ ★ ★ ★ ★ ★ ★ ★ ★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;}