IE6 / 7 compatible pseudo-classes, IE9 compatible with the color gradient, IE8 compatible with the nth: child (n)

1.IE6 / 7 dummy class compatible

  _1.CSS parts: a colon, it is a space separated. The former IE8 + and other modern browsers; the latter is prepared IE6-7

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

  _2.HTML part

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

  Set content

  _3.JS portion is provided 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 compatible with the following color gradient

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

  It represents a vertical gradientType is 0, 1 is representative of the level of

  

  (supplement) 

  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 the following compatible nth: child (n)

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

  }

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

 

Guess you like

Origin www.cnblogs.com/Yzzzzzzzzz/p/10945130.html