IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类

  _1.CSS部分:一个有冒号,一个是空格分隔。前者IE8+及其他现代浏览器;后者为IE6-7准备的

  #test:before, #test before{
    content: attr(data-content);
    width: 0;
    height: 0;
  }

  _2.HTML部分

  <div id="testdata-content=""></div>

  设置content

  _3.JS部分 设置IE6/7

  var $beforeAfter = function(dom) {
    if (document.querySelector || !dom && dom.nodeType !== 1) return;
    var content = dom.getAttribute("data-content") || '';
    var before = document.createElement("before") , after = document.createElement("after");
    before.innerHTML = content;
    after.innerHTML = content;
    dom.insertBefore(before, dom.firstChild);
    dom.appendChild(after);
  };

  _4使用
  $beforeAfter(document.getElementById("test"));

2.IE9以下兼容颜色渐变

  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#237CB9', endColorstr='#7BBCF2', gradientType='1');

  gradientType为0时代表垂直,为1时代表水平

  

  (补充) 

  background: linear-gradient(bottom,blue,#fff); //渐变
  background: -ms-linear-gradient(bottom,blue,#fff); //IE
  background: -webkit-linear-gradient(bottom,blue,#fff); //谷歌
  background: -o-linear-gradient(bottom,blue,#fff); //opera
  background: -moz-linear-gradient(bottom,blue,#fff); //火狐

3.IE8以下兼容nth:child(n)

  1.table tr td:first-child+td{

  }

  2.使用Jquery   $("table tr td:nth-child(2)").css("background-color","yellow");

猜你喜欢

转载自www.cnblogs.com/Yzzzzzzzzz/p/10945130.html