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

Posted 2021-12-11 yzzzzzzzzz

1.IE6/7兼容伪类

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

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

　　_2.html部分

　　<div id="test"  data-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");