html 页面写 IE hack

详细说明资料的请参看网址:关于 IE 的一些 hack - !win ! - 博客园

ie 的条件语句常用的有几下几种(所有条件注释语句在非 IE 浏览器下都是普通的注释,不要用非 ie 去给非 IE 的浏览执行操作):

  • lt :就是 Less than 的简写,也就是小于的意思。
  • lte :就是 Less than or equal to 的简写,也就是小于或等于的意思。
  • gt :就是 Greater than 的简写,也就是大于的意思。
  • gte:就是 Greater than or equal to 的简写,也就是大于或等于的意思。
  • !:就是不等于的意思,跟 javascript 里的不等于判断符相同。
<!--[if IE]>
    只有IE才支持
<![endif]-->

<!--[if !IE 7]>
    IE7不支持
<![endif]-->

<!--[if lt IE 8]>
    IE8以下浏览器才支持
<![endif]-->

<!--[if lte IE 8]>
    IE8及以下浏览器才支持
<![endif]-->

<!--[if gt IE 8]>
    IE8以上浏览器才支持
<![endif]-->

<!--[if gte IE 8]>
    IE8及以上浏览器才支持
<![endif]-->

<!--[if lt IE 9]>
    IE9 以下
<![endif]-->

iOS 端页面中做弹窗,当弹窗弹出时会出现一个:上下滑动时影响到弹窗下面的内容也就是 container 内容的滚动条

  • 在 layout css 全局中新增一个类名样式
/* 弹窗专用 禁止滚轮 滚动*/
.scrollnone {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  max-width: 640px;
  min-width: 320px;
  left: 0;
  right: 0;
  margin: auto;
}
//公用的手机端处理 iOS 弹窗 bug
this.ioslayopenpopup = function() {
  var _me = this;
  $('body,html').addClass('scrollnone');
  return _me;
};
//公用的手机端处理 iOS 弹窗 bug
this.ioslayclosepopup = function() {
  var _me = this;
  $('body,html').removeClass('scrollnone');
  return _me;
};
//公用的关闭弹窗
this.closelaypopup = function() {
  var _me = this;
  $('#lay-popup-bg,.lay-popup').hide();
  _me.ioslayclosepopup();
  return _me;
};
//打开报名弹窗
this.openlaypopup0 = function() {
  var _me = this;
  _me.closelaypopup();
  $('#lay-popup-bg,.lay-popup0').show();
  _me.ioslayopenpopup();
  return _me;
};

手机端使用的一些全局的样式代码片段

/*文本单行溢出隐藏*/

.txtoneline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*文本多行溢出隐藏  -webkit-line-clamp: 2; 溢出行数*/

.txtmorline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 公用限制最大最小宽,且居中显示类名 */

.limitcen {
  max-width: 640px;
  min-width: 320px;
  margin: 0 auto;
  width: 100%;
}

/* 公用完美居中样式 */

.perfectcen {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

html {
  font-size: calc(100vw / 3.75);
}

/* 对浏览器兼容性要求较高 CSS3 属性 */

html,
body {
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC',
    'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei',
    sans-serif;
  background: #f3f3f3;
  color: #333;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  min-width: 320px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* 取消链接高亮 */
}

/*清除浮动*/

.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/*IE6/7*/

/*表单元素统一初始化样式*/

input,
select,
button {
  vertical-align: middle;
  margin: 0;
  font-family: microsoft yahei;
  -webkit-appearance: none;
  /*去除阴影*/
  border: 0;
  outline: 0;
  background-color: transparent;
}

.checkbox {
  -webkit-appearance: checkbox;
}

input[type='checkbox'] {
  -webkit-appearance: checkbox;
}

select {
  background: url('/Images/share/icon-select-arrow.png') no-repeat scroll right
    center transparent;
  background-size: 0.14rem 0.08rem;
}

/*input palceholder 样式自定义*/

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

/* 使用webkit内核的浏览器 */

input:-moz-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

/* Firefox版本4-18 */

input::-moz-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

/* Firefox版本19+ */

input:-ms-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

PC 端滚动条样式自定义代码片段

/*自定义滚动条样式*/

.common-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.common-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

HTML5 中的 data-*属性和 jQuery 中的.data()方法使用

参考文章链接:http://blog.csdn.net/fly_zxy/article/details/50687691

参考 demo 链接:https://codepen.io/voronianski/pen/aicwk?q=Typewriter&limit=all&type=type-pens

HTML5 中的 data-*属性

我们往往会根据需要在 HTML 标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的 getAttribute()或 jQuery 中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5 标准规定,自定义的属性都已 data—*开头,这样就区分开了固有属性和自定义属性。HTML5 代码示例如下:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data-* 在 HTML5 和 jQ 中的用法</title>
</head>

<body>
  <div id="container" data-name="你好" data-english-name="hello" data-Age="26"></div>
  <script>
    // JS 的写法
    var element = document.getElementById('container');
    var dataObject = element.dataset; //获取到的是一个键值对的对象
    console.log(dataObject); //DOMStringMap {name: "你好", englishName: "hello", age: "26"}
    for (var key in dataObject) { //遍历对象的键与值
      console.log(key); //name     englishName     age
      console.log(dataObject[key]); //你好       hello       26
    }
  </script>
</body>
</html>

在获取自定义属性的值时,使用dataset属性,然后通过自定义属性data-name的名称去掉data如:dataObject[name]去获取值。dataset是 JS5 规范中新增加的属性,用于和data-*配合使用。

需要注意的是:

  • 如果data-后面包含了“-”,例如 english-name,”-“会被去掉,自动的转换成为骆驼峰式的命名 englishName。这是因为 JSON Object 的 key 不能包含”-“。
  • 如果 data-后面的单词有大写,例如 Age,将会转存成小写 age。
  • 如果你想删除一个 data-*属性,请使用 delete dataset.name或者dataset.name=null;
  • data-*属性看起来很好,但是不幸的是只有在 Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或 jQuery 中的.attr()

jQuery 中的.data()

jQuery 中的.data()方法作用:在 jQuery 对象对应的 DOM 元素上获取或存放 key-value 对。我们可以通过 html5 的 data-属性在元素上存取数据,在 jQuery 也可以通过 data()来实现。data()方法有多个重载,传递一个参数是获取 value 值,传递两个参数是存储或覆盖已存在的值,传递一个 JSON Object 是在元素上存储或覆盖已存在的多个 key-value 对。如果通过 data() 在元素上存储 key-value,value 可以是一个对象,而不是像 data-只能存储一个字符串的 value。下面给出一个综合示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data-* 在 HTML5 和 jQ 中的用法</title>
</head>

<body>
  <div id="container" data-name="你好" data-english-name="hello" data-Age="26"></div>
  <script>
    //jQ 写法
    var element = $('#container');
    var dataObject = element.data(); //获取到的是一个键值对的对象
    console.log(dataObject); //{age: 26, englishName: "hello", name: "你好"}  这个输出的整个的结构和上面的是一样的  但是顺序是相反的 从后往前
    $.each(dataObject, function(key, value) { //遍历对象的键与值
      console.log(key); //age      englishName     name
      console.log(value); //26     hello       你好
      console.log($(this)); //r.fn.init [Number]       r.fn.init(9) ["x", "i", "a", "o", "c", "h", "u", "a", "n"]      r.fn.init(2) ["你", "好"]
      element.data(key, value + '1'); //修改 value
      // element.removeData(key);//删除属性的方法
    });
    console.log(dataObject); //{age: "261", englishName: "hello1", name: "你好1"}  修改后的对象  但是这个修改并不会影响页面中的属性的值  只是在 jq 中可以调用
  </script>
</body>
</html>

.data()可以获取通过 data-属性存储的值。
通过.data()修改 data-属性的值不会显示在 HTML 标记中,我们只是通过.data()在元素存储了一个新值。
.removeData()也不能删除通过 data-*存储的真正的页面上的数据。由于 jQuery 是一个通用的 JS 框架,对浏览器兼容性做的非常好,大多数情况,我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。

jQ 官网 API 示例:http://api.jquery.com/jquery.data/

css 实现简单的关闭按钮

/*css 实现关闭叉号*/

.css-close-btn(@width: 30px, @height: 30px, @bgcolor: @colorwhite, @linewidth: 30px, @lineheight: 30px, @linebgcolor: @colorwhite) {
  background-color: @bgcolor;
  width: @width;
  height: @height;
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: @linewidth;
    height: @lineheight;
    background-color: @linebgcolor;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    -o-transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: @linewidth;
    height: @lineheight;
    background-color: @linebgcolor;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    -o-transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/*具体的引用实现*/

.rule__close-btn {
  .css-close-btn(
    42 / @layremvalue,
    42 / @layremvalue,
    #ddd,
    18 / @layremvalue,
    2 / @layremvalue,
    @colorwhite
  );
  position: absolute;
  border-radius: 50%;
  right: 30 / @layremvalue;
  top: 26 / @layremvalue;
}

在手机端上自定义的一些可公用的 less 变量

/*配合 js 计算的 rem 使用具体换算设计稿的 20px = 20 / @layremvalue*/

@layremvalue: 100rem;
/*flex 垂直居中布局*/

.flex(@align: center) {
  display: -webkit-flex;
  display: flex;
  /*y轴对齐方式 可传参*/
  align-items: @align;
  /*x轴对齐方式*/
  /*justify-content:center;*/
}

/*换行,第一行在上方*/

.flex_wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/*transform: translateZ(0); 开启动画硬件加速*/

.openanimatequick {
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /*修复卡顿*/
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*背景渐变 线性渐变  由下到上 可传色值参数*/

.bggradient-bot-top(@colorstart, @colorend) {
  background-image: -ms-linear-gradient(bottom, @colorstart, @colorend);
  background-image: -moz-linear-gradient(bottom, @colorstart, @colorend);
  background-image: -webkit-gradient(
    linear,
    bottom,
    top,
    from(@colorstart),
    to(#872ccf)
  );
  background-image: -webkit-linear-gradient(bottom, @colorstart, @colorend);
  background-image: -o-linear-gradient(bottom, @colorstart, @colorend);
  background-image: linear-gradient(0, @colorstart, @colorend);
}

/*内边框 用阴影实现*/

.shadow-inset(@width: 1px, @color: @coloryellow1, @style: inset) {
  box-shadow: 0 0 0 @width @color @style;
}

手机端的 rem 具体实现方法:将下面的 js 片段放置于 <head></head> 标签内部,确保页面加载时优先计算这部分的 js 否则会出现闪屏的 bug

//初始化 html fontSize 值
//设计稿 720
//除以7.2 这里是以iphone6 的宽度375px为标准,为了保证html的字体大小为100px。这样我们在换算的时候,1px 就是0.01rem,就很容易计算。(设计稿是 750 w,实际是 720 所以 除以7.2)
function calcHtmlFontSize() {
  var htmlEle = document.documentElement;
  var htmlWidth =
    document.documentElement.clientWidth ||
    document.body.clientWidth ||
    window.innerWidth ||
    window.screen.width;
  //console.log(htmlWidth);
  //强制改变可视区域的宽度 页面最宽为 640 最窄为320
  if (htmlWidth > 640) {
    htmlWidth = 640;
  } else if (htmlWidth < 320) {
    htmlWidth = 320;
  }
  //console.log(htmlWidth);
  htmlEle.style.fontSize = htmlWidth / 7.2 + 'px';
}
calcHtmlFontSize();
window.onresize = function() {
  calcHtmlFontSize();
};

PC 端常用的右侧固定定位的导航条 css 和 js 配合实现

less

/*活动页面专用右侧固定定位导航  参数的数值可以在引用时随意的修改*/

.activity-fixed__nav(@width: @px120, @height: @px400, @backgroundColor: @coloryellow4, @marginRight: -(600 + @width)) {
  .openanimatequick;
  .box-style;
  position: fixed;
  width: @width;
  height: @height;
  right: 50%;
  top: 0;
  bottom: 0;
  margin: auto @marginRight auto auto;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: @backgroundColor;
  z-index: 99;
}

/*具体的引用实现*/

.fixed__nav {
  .activity-fixed__nav;
}

js

//滚轮滚动事件
$(window).scroll(function() {
  var _this = $(this);
  var targetTop = _this.scrollTop();
  //活动页面专用右侧固定定位导航 动画
  if (targetTop > $(window).height() - 600) {
    $('#fixed__nav').css({
      transform: 'scale(1)',
      '-ms-transform': 'scale(1)',
      '-moz-transform': 'scale(1)',
      '-webkit-transform': 'scale(1)',
      '-o-transform': 'scale(1)'
    });
  } else {
    $('#fixed__nav').css({
      transform: 'scale(0)',
      '-ms-transform': 'scale(0)',
      '-moz-transform': 'scale(0)',
      '-webkit-transform': 'scale(0)',
      '-o-transform': 'scale(0)'
    });
  }
});

向上的三角形 less

/*向上三角形可传参数*/

.triangle-top(@size: @px5, @color: @colorwhite) {
  width: 0;
  height: 0;
  border: solid @size;
  border-color: transparent transparent @color transparent;
}

/*具体的引用实现*/

&:before {
  content: '';
  position: absolute;
  .triangle-top;
  top: @px7;
  right: @px13;
}

全屏 canvas 不能被选中

/*全屏 canvas 不能被选中*/

.full-canvas {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}