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="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");

原文地址:https://www.cnblogs.com/Yzzzzzzzzz/p/10945130.html

时间: 2024-10-05 04:40:55

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

CSS之伪类

:hover -- CSS :hover 伪类,适用于光标(鼠标指针)指向一个元素,但此元素未被激活时的样式 语法: :hover CSS版本:CSS2 引用网址:http://www.dreamdu.com/css/pseudo-class_hover/ 说明: 适用于光标(鼠标指针)指向一个元素,但此元素未被激活时 客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover.active.focus 上述三种伪类不是互斥的,一个元素同时可以适用其中的

【转】链接伪类(:hover)CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面

深入理解CSS伪类

× 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他 前面的话 伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示.本文将详细介绍伪类的详细知识 锚点 关于锚点<a>,有常见的5个伪类,分别是:link,:hover,:active,:focus,:visited a:link{background-color:pink;}/*

css总结12:CSS 伪类(Pseudo-classes)

1 伪类作用:CSS伪类是用来添加一些选择器的特殊效果. 2 常用示例: 2.1anchor伪类:代码:   正常语法: a{color:#FF0000;}/* 文字颜色 */   伪类语法: a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */

IE6不支持:hover伪类效果的解决办法

:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器就显示不出来. 在IE6中只兼容a:hover,要使用li:hover或div:hover,需引用一个文件使其兼容: csshover.htc (点击直接查看) 放在网站的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...cssh

DIV+CSS IE6/IE7/IE8/FF兼容问题大全

1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

IE6/IE7/IE8/FF兼容问题汇总,以及解决方案

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了<meta http-equiv="x-ua-compatible" content="ie=7" />2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px !important;;margin-left:5px;+height:120px;5.有时

(继承及其访问限定符)&&(派生类及其默认成员函数)&&(赋值兼容规则)

◆继承: ★继承概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特性的基础上进行扩展,增加功能.这样产生新的类,称派生类.继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂的认知过程. 继承定义格式 ★继承关系&访问限定符 class Base { public: Base() { cout<<"B()" <<endl; } ~Base () { cout<<"~